Subir archivos al servidor
Hace un tiempo compartí un pequeño fragmento de código para poder subir al archivos al servidor mediando jQuery y PHP, lo puede ver siguiendo el enlace a continuación:
Ahora quiero compartir otro fragmento de código para subir archivos o imágenes al servidor, pero esta vez el script permite la subida de múltiples archivos.
Para este ejemplo se ha creado un archivo llamado “index.php“, con la estructura siguiente:
|
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 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Subir múltiples imágenes al servidor usando jQuery y PHP</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 align="center">Subir múltiples imágenes al servidor usando jQuery y PHP </h1> <div align="center"> <button type="button" data-toggle="modal" data-target="#src_img_upload" class="btn btn-success btn-lg">Subir archivos</button> </div> <br/> <div id="image_gallery"> <?php $images = glob("uploads/*.*"); foreach($images as $image) { echo '<div class="col-md-2" align="center"><img src="' . $image .'" width="180px" height="180px" style="border:1px dotted #cacaca; margin-top:10px;"/></div>'; } ?> </div> </div> <br/> <div id="src_img_upload" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Subir multiples imágenes</h4> </div> <div class="modal-body"> <form method="POST" id="upload_form"> <label>Seleccion las imágenes</label> <input type="file" name="images[]" id="img_select" multiple class='form-control'> </form> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('#img_select').change(function(){3 $('#upload_form').submit(); }); $('#upload_form').on('submit', function(e){ e.preventDefault(); $.ajax({ url : "upload.php", method : "POST", data: new FormData(this), contentType:false, processData:false, success: function(data){ $('#img_select').val(''); $('#src_img_upload').modal('hide'); $('#image_gallery').html(data); } }) }); }); </script> </body> </html> |
Luego se ha creado en el directorio raíz, una carpeta llamada “uploads“, en la cual se cargarán las imágenes que enviemos desde el formulario creado anteriormente. Ahora solo resta crear el archivo que se encargue de procesar la petición Ajax, para poder cargar las imágenes a nuestro servidor, para ello se ha creado un archivo llamado “upload.php” con el código siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php $output = ''; if(is_array($_FILES)) { foreach($_FILES['images']['name'] as $name => $value) { $file_name = explode(".", $_FILES['images']['name'][$name]); $allowed_extension = array("jpg", "jpeg", "png", "gif"); if(in_array($file_name[1], $allowed_extension)) { $new_name = rand() . '.'. $file_name[1]; $sourcePath = $_FILES["images"]["tmp_name"][$name]; $targetPath = "uploads/".$new_name; move_uploaded_file($sourcePath, $targetPath); } } $images = glob("uploads/*.*"); foreach($images as $image) { $output .= '<div class="col-md-2" align="center" ><img src="' . $image .'" width="180px" height="180px" style="border:1px solid #ccc;margin-top:10px;" /></div>'; } echo $output; } ?> |
Bien, esto sería todo para poder subir múltiples imágenes a nuestro servidor usando jQuery y PHP, el ejemplo es muy sencillo pero funcional.
