Transferencia de archivos asíncrona en AJAX

Para transferir Archivos en jQuery usando Ajax seguimos los siguientes pasos y un ejemplo demostrando lo mismo:

1. Usando HTML5, podemos cargar archivos usando un formulario. El tipo de contenido se especifica como multipart/form-data .
2. Se crea un campo de entrada para que los archivos se carguen con el tipo de entrada como archivo .
3. Podemos usar el atributo múltiple para permitir que se cargue más de un archivo y también podemos filtrar los tipos de archivos usando el atributo de aceptación.
4. Al cargar, un oyente agrega los archivos cargados a una lista de archivos de forma iterativa.
5. Con el botón Enviar, se crea una solicitud ajax y los datos del formulario se envían a la URL especificada.

Ejemplo: aquí considere el caso de enviar videos de forma asíncrona.

• Hemos creado un formulario HTML5 como se muestra a continuación:

  <div>     <form method="POST" enctype="multipart/form-data"             action="" id="capt">         <div class="form-group">             <label>Select Files</label>             <input type="file" id="file" name="file[]"                 accept="video/*" class="form-control"                 multiple="multiple" required>         </div>            <input type="submit" class="btn btn-info"                 value="Submit">     </form> </div>

• Usando jQuery, creamos métodos apropiados para cargar y enviar archivos de forma asíncrona.

  var fileList = [];    $('#file').on('change', function (event) {        fileList = [];        // Append files to fileList     for (var i = 0; i < this.files.length; i++) {         fileList.push(this.files[i]);     } });    sendFile = function (file) {        // Create Ajax Request     $.ajax({         url: 'notify.php',         type: 'POST',         data: new FormData($('form')[0]),         cache: false,         contentType: false,         processData: false     }); }    $('#capt').on('submit', function (event) {     event.preventDefault();            //Asynchronous Transfer     sendFile(file); });

• En aras de demostrar el resultado, creamos un archivo PHP mínimo como se muestra a continuación:

  <?php    $video = $_FILES['file']['name']; foreach($video as $vd){     echo $vd."<br>"; } ?>

• Salida (notificar.php):