Estoy consciente de que en la web existen muchos tutoriales que explican cómo subir archivos al servidor con PHP. Pero en esta ocasión quiero compartir un fragmento de código que me ha sido mucha utilidad a la hora de realizar mis proyectos web, pues se trata del código que uso para subir archivos a mi servidor web y especialmente cuando son imágenes. Hoy vamos a tratar de cargar un archivo con una forma muy interesante. En este tutorial se les mostrará cómo subir archivos usando PHP, jQuery y Bootstrap.
Antes de empezar echaremos un vistazo a la estructura de carpetas y archivos.
De acuerdo con la estructura de los archivos anteriormente, las imágenes se guardaran en dentro del directorio llamado upload. Para este tutorial los archivos CSS y JavaScript son cargados remotamente.
index.php
El archivo index.php contiene el código HTML y JavaScript. Tal como se muestra a continuación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Subir archivos usando PHP - jQuery - Bootstrap</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="text-center"> <h1>Subir archivos usando PHP - jQuery - Bootstrap</h1> <form> <div class="form-group"> <label for="exampleInputFile">Subir archivo</label> <center><input type="file" id="fileToUpload" onchange="upload_image();"></center> <p class="help-block">Seleccion un archivo.</p> </div> <div class="upload-msg"></div><!--Para mostrar la respuesta del archivo llamado via ajax --> </form> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script> function upload_image(){//Funcion encargada de enviar el archivo via AJAX $(".upload-msg").text('Cargando...'); var inputFileImage = document.getElementById("fileToUpload"); var file = inputFileImage.files[0]; var data = new FormData(); data.append('fileToUpload',file); /*jQuery.each($('#fileToUpload')[0].files, function(i, file) { data.append('file'+i, file); });*/ $.ajax({ url: "upload.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: data, // Data sent to server, a set of key/value pairs (i.e. form fields and values) contentType: false, // The content type used when sending data to the server. cache: false, // To unable request pages to be cached processData:false, // To send DOMDocument or non processed data file it is set to false success: function(data) // A function to be called if request succeeds { $(".upload-msg").html(data); window.setTimeout(function() { $(".alert-dismissible").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }); }, 5000); } }); } </script> </body> </html> |
Código JavaScript: Hemos creado una función Javascript que se encargara de enviar los datos mediante Ajax al archivo upload.php, el cual a su vez se encargara de procesar la información enviada mediante jQuery Ajax
Código HTML: Hemos utilizado un formulario HTML con un campo de de tipo file el cual se encargá de seleccionar un archivo en nuestro ordenador. El ID del campo “fileToUpload” se usa como identificador único del formulario, el cual se usará en la función JavaScript para poder mandar los datos recogidos desde nuestro formulario; luego dentro del mismo campo de tipo file hemos colocado un evento onchange, el cual se encarga de enviar automáticamente el formulario una vez hayamos seleccionado el archivo deseado desde nuestro ordenador.
upload.php
El archivo upload.php contiene todas las instrucciones necesarias para que se cargue el archivo que hemos enviado usando jQuery AJAX sea cargado a nuestro servidor. Ademas hemos colocado unas pequeñas validaciones del cliente para asegurarnos que el archivo enviado es el tipo de archivo que queremos alojar en nuestro servidor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<?php //echo count($_FILES["file0"]["name"]);exit; if($_SERVER['REQUEST_METHOD'] == "POST" && isset($_FILES["fileToUpload"]["type"])){ $target_dir = "upload/"; $carpeta=$target_dir; if (!file_exists($carpeta)) { mkdir($carpeta, 0777, true); } $target_file = $carpeta . basename($_FILES["fileToUpload"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false) { $errors[]= "El archivo es una imagen - " . $check["mime"] . "."; $uploadOk = 1; } else { $errors[]= "El archivo no es una imagen."; $uploadOk = 0; } } // Check if file already exists if (file_exists($target_file)) { $errors[]="Lo sentimos, archivo ya existe."; $uploadOk = 0; } // Check file size if ($_FILES["fileToUpload"]["size"] > 524288) { $errors[]= "Lo sentimos, el archivo es demasiado grande. Tamaño máximo admitido: 0.5 MB"; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { $errors[]= "Lo sentimos, sólo archivos JPG, JPEG, PNG & GIF son permitidos."; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { $errors[]= "Lo sentimos, tu archivo no fue subido."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { $messages[]= "El Archivo ha sido subido correctamente."; } else { $errors[]= "Lo sentimos, hubo un error subiendo el archivo."; } } if (isset($errors)){ ?> <div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Error!</strong> <?php foreach ($errors as $error){ echo"<p>$error</p>"; } ?> </div> <?php } if (isset($messages)){ ?> <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Aviso!</strong> <?php foreach ($messages as $message){ echo"<p>$message</p>"; } ?> </div> <?php } } ?> |
Conclusión
Este proceso de carga de archivos le ayudará cuando se quiere cargar el archivo sin recargar la página para ello hemos utilizado jQuery AJAX. No digo que este script sea el más seguro o el mejor que existe, ya que en la web existen otros script muy buenos que realizan tal función, pero considero que puede serviros en vuestros proyectos y es por ello que decidí compartirlo.
Para descargar los archivos, debes realizar cualquiera de las siguientes acciones sociales:
Demostración en vivo Descargar archivos
