jQuery Upload File – Subir fichero con jQuery y PHP

Publicada el por

Veamos cómo podemos subir un fichero desde nuestro navegador al servidor web, con jQuery Upload File.

jquery tutorial
jQuery

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