jQuery Upload File – Subir fichero con jQuery y PHP
Veamos cómo podemos subir un fichero desde nuestro navegador al servidor web, con jQuery Upload File.
Sigamos con nuestros tutoriales de jQuery. En esta ocasión utlizaremos una librería para subir un fichero desde nuestro PC al servidor con un simple formulario.
Instalación
Hay que descargarse la librería (tenéis el enlace en la parte inferior del artículo). Posteriormente debemos cargar los css en el head y la librería JavaScript desde el footer de la página.
Head
Cargaremos los dos CSS con los que cuenta. Uno con los estilos por defecto, y otro que podemos ‘customizar’
<head>
<!-- File uploader -->
<link rel="stylesheet" href="/jqueryuploadfile/uploadfile.css">
<link rel="stylesheet" href="/jqueryuploadfile/uploadfile.custom.css">
</head>Footer
Por otro lado, llamamos la fichero JavaScript que compone la librería
<!-- File upload -->
<script src="/jqueryuploadfile/jquery.uploadfile.js"></script>
</body>
</html>El formulario subida fichero
El formulario es sencillo, si no lo complicamos por algun otro objetivo. Tendremos estos tres componentes en el formulario:
- Por un lado tenemos el campo donde escogeremos la imagen de nuesrto PC «imageFile»,
- por otro un campo Text donde pondremos la url de la imagen subida ‘image_name’
- por último un bloque, imageFileConsole, donde pondremos el mensaje si la tarea se ha realizado correctamente o no.
<form role="form" action="destino.php" method="post">
<div id="imageFile">Upload image</div>
<input type="text" id="image_name" name="image_name" class="form-control" placeholder="File name">
<div id="imageFileConsole"></div>
</form>El código jQuery que realiza la subida asíncrona
Aquí tenemos el código que genera la subida y rellena el textbox con el nombre de la imagen subida. La pondremos en la parte inferior de la página (antes del </body>
<script>
$(document).ready(function () {
$("#imageFile").uploadFile({
url: "<?php echo base_url(); ?>uploafFile.php",
multiple: false,
dragDrop: false,
maxFileCount: 1,
acceptFiles: "image/*",
fileName: "myfile",
returnType: "text",
onSuccess: function (files, data, xhr, pd) {
$("#image_name").val(data);
$("#imageFileConsole").html("File, has been uploaded " + data);
},
onError: function (files, data, errMsg, pd) {
$("#imageFileConsole").html("Error: file, hasn't been uploaded " + data);
}
});
});
</script>Veamos los atributos importantes:
- Primero aplicamos al bloque #imageFile la función uploadFile que es la que se encargará de montar el botón para subir el fichero.
- url: es donde está el fichero PHP que ejececutará la subida del fichero.
- acceptFiles: «image/*» (tipo de ficheros que admite)
- onSuccess: función que se ejecuta si todo ha ido correctamente
- onError: función que se ejecuta si ha habido algún error.
PHP encargado de subir el fichero
Como ya hemos comentado en el apartado anterior, url contendrá la url del fichero PHP encargado de hacer la subida de la imagen. Aquí podríamos tener un ejemplo delo que podría ser:
<?php
/* uploadFile.php */
$fileTmpPath = $_FILES['myFile']['tmp_name'];
$fileName = $_FILES['myFile']['name'];
$fileSize = $_FILES['myFile']['size'];
$fileType = $_FILES['myFile']['type'];
$fileNameCmps = explode(".", $fileName);
$fileExtension = strtolower(end($fileNameCmps));
// Directorio a copiar la imagen
$uploadFileDir = './uploaded_images/';
$destino_path = $uploadFileDir . $newFileName;
if(move_uploaded_file($fileTmpPath, $destino_path))
{
$message ='Imagen subida correctamente.';
}
else
{
$message = 'Se ha cometido un error. Imagen no subida.';
}
?>Lo que enlaza el Javascript y el código PHP, por una parte es, la url. Por otra, si os fijáis, en el JavaScript uno de los atributos es fileName («myFile»), que es el que utilizamos en el PHp para coger el fichero en $_FILES[«myfile»].
Posibles problemas
Los de siempre al subir ficheros:
- Carpetas destino que no existen
- Permiso de la carpeta destino
- Limitación de peso al subir ficheros
- Problemas con los nombres de los ficheros (acentos, carácteres extraños)…
- Formato del fichero a subir…
Como véis, los problemas son innumerables y deberéis ir probando hasta encontrar cuál puede ser el que os impide subir ficheros.
Siguiendo estos pasos y con la librería jQuery Upload File, podréis subir fichero con jQuery a vuestro servidor desde un sencillo formulario.
Más información