I'm creating a page to upload images to the server, this is my index:
(function() {
"use strict";
$(".input-file").each(function() {
var $input = $(this),
$label = $input.next(".js-labelFile"),
labelVal = $label.html();
$input.on("change", function(element) {
var fileName = "";
if (element.target.value) fileName = element.target.value.split("\\").pop();
fileName ? $label.addClass("has-file").find(".js-fileName").html(fileName) : $label.removeClass("has-file").html(labelVal);
});
});
})();
/* Etiquetas */
html, body {
margin: 0 auto;
padding: 0 auto;
}
body {
background-color:white;
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h1, h3 {
color:black;
}
/* Formulario */
.input-file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.input-file + .js-labelFile {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
cursor: pointer;
}
.input-file + .js-labelFile .icon:before {
content: "\f093";
}
.input-file + .js-labelFile.has-file .icon:before {
content: "\f00c";
color: #5AAC7B;
}
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="author" content="Diesan Romero">
<meta name="description" content="Sube tus imagenes de manera temporal">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="src/styles.css">
<title>Imágenes Momentaneas</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center mt-5">
<h1><span>Imágenes Momentáneas</span></h1>
</div>
<div class="row justify-content-center mt-4">
<form action="data.php" method="post" enctype="multipart/form-data">
<div class="form">
<h3 class="row justify-content-center mt-5">Seleccione el tiempo en minutos que estará su imagen en línea</h3>
<div class="row justify-content-center mt-1">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">1</button>
<button type="button" class="btn btn-warning">5</button>
<button type="button" class="btn btn-warning">15</button>
<button type="button" class="btn btn-warning">30</button>
<button type="button" class="btn btn-warning">60</button>
</div>
</div>
<div class="row justify-content-center mt-5">
<input type="file" name="imagen" id="imagen" class="input-file">
<label for="imagen" class="btn btn-lg btn-outline-red js-labelFile">
<i class="icon fa fa-check"></i>
<span class="js-fileName">Elija la imagen a subir</span>
</label>
<input type="submit" class="btn btn-lg btn-red" value="Subir Imagen">
</div>
</div>
</form>
</div>
<div class="row justify-content-center mt-2">
<div class="col-4">
<div class="alert alert-success invisible" role="alert">
La imagen ha sido cargada correctamente, ahora debe subirla.
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script type="text/javascript" src="src/main.js"></script>
</body>
</html>
and here I have the php that will collect the image data:
<?php
// Informacion de la imagen
$nombre = $_FILES['imagen']['name'];
$tipo = $_FILES['imagen']['type'];
$tamano = $_FILES['imagen']['size'];
//Ruta de la carpeta destino en servidor
$destino = $_SERVER['DOCUMENT_ROOT'].'/imagenes/uploads';
//Envia la imagen del directorio temporar al servidor
move_uploaded_file($_FILES['imagen']['tmp_name'], $destino.$nombre);
?>
The problem here is that when I upload the image, I send it to the server, I get these two errors:
Warning: move_uploaded_file(C:/xampp/htdocs/imagenes/uploads2.JPG): failed to open stream: No such file or directory in C:\xampp\htdocs\imagenes-momentaneas\data.php on line 11
Warning: move_uploaded_file(): Unable to move 'C:\xampp\tmp\php5078.tmp' to 'C:/xampp/htdocs/imagenes/uploads2.JPG' in C:\xampp\htdocs\momentary-images\data. php online 11
I don't know much about php, and I still can't figure out what the problem is here.
The idea is to move it to a location that will be temporary for now; then it should be like this
In other words, within the function it would not be necessary to send the value $name
Warning: move_uploaded_file(): Unable to move 'C:\xampp\tmp\php5078.tmp' to 'C:/xampp/htdocs/imagenes/ uploads2.JPG '
you are missing a slash between uploads and name, the error is thrown when not being able to write to /images
also make sure that /images/uploads have write permissions for php/apache
otherwise the error will jump again
It shows you the warnings because the folder does not exist, and since the folder does not exist, it cannot create the file, so that this does not happen we can validate that they exist, if they do not exist we create them with
mkdir
and then save the file. I also suggest you use the PHP constantDIRECTORY_SEPARATOR
so you don't depend on the operating system