Subir múltiples archivos con el plugins jQuery – uploadHBR.js
uploadHBR es un plugins que permite la carga de archivos basado en bootstrap, lo cual permite que sea bastante sensible con función de arrastrar y soltar el selector de archivos. Útil para agregar la función de carga de múltiples archivos en tu sitio web. El complemento soporta principalmente casi todas las funciones que se requiere durante la carga de archivos, como la selección de múltiples archivos, soporte de arrastrar y soltar, soporte para dispositivos móviles, imágenes de vista previa, etc.
Características Principales
- Carga de archivos múltiples:
permite seleccionar varios archivos a la vez y cargarlos simultáneamente. - Soporte de arrastrar y soltar:
permite cargar archivos arrastrándolos desde el área del cuadro de elementos. - Imágenes de vista previa:
se puede mostrar una vista previa del archivo de imagen antes de cargarlo con los navegadores compatibles con las API requeridas. - No se requieren complementos para el navegador (por ejemplo, Adobe Flash):
la complementación se basa en estándares abiertos como HTML5 y JavaScript y no requiere complementos adicionales para el navegador.
Integrar cargador de múltiples archivos compatible con Bootstrap
Bibliotecas:
Incluye la biblioteca de bootstrap para el diseño del cargador y luego carga la biblioteca de complementos en la página.
|
1 2 3 4 5 6 7 8 9 |
<!--CSS--> <link id="bootstrap-styleshhet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <link href="../dist/css/style.min.css" rel="stylesheet" type="text/css"/> <!--JS--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script src="../dist/js/modernizr.min.js"></script> <script src="../dist/js/uploadHBR.min.js"></script> |
Archivo HTML:
Crea un cuadro de carga de archivos múltiples para subir varios archivos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="row"> <div class="col-md-12"> <div class="col-md-12 text-center"> <form role="form" action="upload.php" method="post" enctype="multipart/form-data"> <div class="row"> <div class="col-xs-12 col-md-12"> <div class="col-md-12 col-lg-12 col-xs-12" id="columns"> <h3 class="form-label">Select the images</h3> <div class="desc"><p class="text-center">or drag to box</p></div> <div id="uploads"><!-- Upload Content --></div> </div> <div class="clearfix"></div> <button class="btn btn-danger btn-lg pull-left" id="reset" type="button" ><i class="fa fa-history"></i> Clear</button> <button class="btn btn-primary btn-lg pull-right" type="submit" ><i class="fa fa-upload"></i> Upload </button> </div> </div> </form> </div> </div> </div> |
Script JavaScript:
Ahora inicializa el complemento y pasa las opciones para personalizar el cargador.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function () { uploadHBR.init({ "target": "#uploads", "max": 18, "textNew": "ADD", "textTitle": "Click here or drag to upload an imagem", "textTitleRemove": "Click here remove the imagem" }); $('#reset').click(function () { uploadHBR.reset('#uploads'); }); }); </script> |
Script PHP:
Este archivo se encarga de realizar la carga de las imágenes o archivos a 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 |
<?php if (empty($base = $_POST['base'])) die("missing string base64"); function base64ToJpeg($base64_string) { $data = explode(';', $base64_string); $dataa = explode(',', $base64_string); $part = explode("/", $data[0]); if (empty($part)) return false; $file = md5(uniqid(rand(), true)) . ".{$part[1]}"; if (!is_dir(realpath(__DIR__) . "/uploads/")) mkdir(realpath(__DIR__) . "/uploads/"); $ifp = fopen(realpath(__DIR__) . "/uploads/{$file}", 'wb'); fwrite($ifp, base64_decode($dataa[1])); fclose($ifp); return $file; } foreach ($base as $index => $base64) { if (!empty($base64) && !file_exists($finalFile = sprintf('%1$s/uploads/%2$s', realpath(__DIR__), base64ToJpeg($base64)))) die("Upload error {$finalFile} on index : {$index}"); } print "Uploaded with success !"; |
Mira la demostración en vivo y descarga el código fuente.
Visita el repositorio oficial de Github para más información y sigue para futuras actualizaciones. No olvides leer la licencia para usar este complemento en tus proyectos.
