ejemplo - remove class jquery

Carga de múltiples archivos HTML5: cargue uno por uno a través de AJAX

Question

Tengo un formulario de carga de archivos múltiples:

<input type="file" name="files" multiple />

Estoy publicando estos archivos con ajax. Me gustaría subir los archivos seleccionados uno por uno (para crear barras de progreso individuales, y por curiosidad).

Puedo obtener la lista de archivos o archivos individuales

FL = form.find(''[type="file"]'')[0].files
F  = form.find(''[type="file"]'')[0].files[0]

yieling

FileList { 0=File, 1=File, length=2 }
File { size=177676, type="image/jpeg", name="img.jpg", more...}

Pero FileList es inmutable y no puedo encontrar la manera de enviar un solo archivo.

Creo que esto es posible ya que vi http://blueimp.github.com/jQuery-File-Upload/ . No quiero utilizar este complemento, sin embargo, ya que se trata tanto de aprender como de resultado (y de todos modos necesitaría mucha información). Tampoco quiero usar Flash.

Answer 1

Usando este código fuente puedes subir múltiples archivos como google uno por uno a través de ajax. También puedes ver el progreso de carga

HTML

 <input type="file" id="multiupload" name="uploadFiledd[]" multiple >
 <button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
 <div id="uploadsts"></div>

Javascript

<script>

function uploadajax(ttl,cl){

var fileList = $(''#multiupload'').prop("files");
$(''#prog''+cl).removeClass(''loading-prep'').addClass(''upload-image'');

var form_data =  "";

form_data = new FormData();
form_data.append("upload_image", fileList[cl]);


var request = $.ajax({
          url: "upload.php",
          cache: false,
          contentType: false,
          processData: false,
          async: true,
          data: form_data,
          type: ''POST'', 
          xhr: function() {  
      var xhr = $.ajaxSettings.xhr();
      if(xhr.upload){ 
        xhr.upload.addEventListener(''progress'', function(event){
                        var percent = 0;
                        if (event.lengthComputable) {
                            percent = Math.ceil(event.loaded / event.total * 100);
                        }
                        $(''#prog''+cl).text(percent+''%'')

                    }, false);
       }
      return xhr;
     }    
      })
      .success(function(res,status) {

        if(status == ''success''){

            percent = 0;
            $(''#prog''+cl).text('''');            

                $(''#prog''+cl).text(''--Success: '');

            if(cl < ttl){
                uploadajax(ttl,cl+1);
            }else{
               alert(''Done '');

            }     

            }

      })
      .fail(function(res) {
      alert(''Failed'');
      });

}



$(''#upcvr'').click(function(){

var fileList = $(''#multiupload'').prop("files");
$(''#uploadsts'').html('''');
var i
for ( i = 0; i < fileList.length; i++) {
$(''#uploadsts'').append(''<p class="upload-page">''+fileList[i].name+''<span class="loading-prep" id="prog''+i+''"></span></p>'');
if(i == fileList.length-1){
    uploadajax(fileList.length-1,0);
}
}

});

</script>

PHP

upload.php
    move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);

Answer 2

Estaba enfrentando el mismo problema y vine con esta solución. Simplemente recupero el formulario con varias partes, y en una llamada recursiva (archivo tras archivo) comienzo la solicitud ajax, que solo llama a continuación cuando finaliza.

var form = document.getElementById( "uploadForm" );
var fileSelect = document.getElementById( "photos" );
var uploadDiv = document.getElementById( "uploads" );

form.onsubmit = function( event ) {
    event.preventDefault(  );

    var files = fileSelect.files;
    handleFile( files, 0 );
};

function handleFile( files, index ) {
    if( files.length > index ) {
        var formData = new FormData(  );
        var request = new XMLHttpRequest(  );

        formData.append( ''photo'', files[ index ] );
        formData.append( ''serial'', index );
        formData.append( ''upload_submit'', true );

        request.open( ''POST'', ''scripts/upload_script.php'', true );
        request.onload = function(  ) {
            if ( request.status === 200 ) {
                console.log( "Uploaded" );
                uploadDiv.innerHTML += files[ index ].name + "<br>";
                handleFile( files, ++index );
            } else {
                console.log( "Error" );
            }
        };
        request.send( formData );
    }
}

Answer 3

Para que se trate de una operación sincrónica, debe iniciar la nueva transferencia cuando finalice la última. Gmail, por ejemplo, envía todo a la vez, al mismo tiempo. El evento para el progreso en la carga de archivos AJAX es progress o onprogress en la instancia XmlHttpRequest sin XmlHttpRequest .

Entonces, después de cada $.ajax() , del lado del servidor (que no sé lo que usará), envíe una respuesta JSON para ejecutar el AJAX en la siguiente entrada. Una opción sería unir el elemento AJAX a cada elemento, para facilitar las cosas, por lo que podría hacer, en el caso de success $(this).sibling(''input'').execute_ajax() .

Algo como esto:

$(''input[type="file"]'').on(''ajax'', function(){
  var $this = $(this);
  $.ajax({
    ''type'':''POST'',
    ''data'': (new FormData()).append(''file'', this.files[0]),
    ''contentType'': false,
    ''processData'': false,
    ''xhr'': function() {  
       var xhr = $.ajaxSettings.xhr();
       if(xhr.upload){ 
         xhr.upload.addEventListener(''progress'', progressbar, false);
       }
       return xhr;
     },
    ''success'': function(){
       $this.siblings(''input[type="file"]:eq(0)'').trigger(''ajax'');
       $this.remove(); // remove the field so the next call won''t resend the same field
    }
  });
}).trigger(''ajax'');  // Execute only the first input[multiple] AJAX, we aren''t using $.each

El código anterior sería para múltiples <input type="file"> pero no para <input type="file" multiple> , en ese caso, debería ser:

var count = 0;

$(''input[type="file"]'').on(''ajax'', function(){
  var $this = $(this);
  if (typeof this.files[count] === ''undefined'') { return false; }

  $.ajax({
    ''type'':''POST'',
    ''data'': (new FormData()).append(''file'', this.files[count]),
    ''contentType'': false,
    ''processData'': false,
    ''xhr'': function() {  
       var xhr = $.ajaxSettings.xhr();
       if(xhr.upload){ 
         xhr.upload.addEventListener(''progress'', progressbar, false);
       }
       return xhr;
     },
    ''success'': function(){
       count++;
       $this.trigger(''ajax'');
    }
  });
}).trigger(''ajax''); // Execute only the first input[multiple] AJAX, we aren''t using $.each 

Answer 4

Esto parece un muy buen tutorial, justo lo que estás buscando .

Dicho eso, la carga a través de vanilla ajax no es compatible con todos los navegadores, y aún así recomendaría usar un iframe . (IE crea dinámicamente un iframe y lo POST usa javascript)

Siempre he estado usando este script y me parece muy conciso. Si desea aprender a cargar mediante la creación de un iframe, debe buscar en su origen.

Espero eso ayude :)

Edición extra

Para crear barras de progreso con el método iframe, necesitará hacer algo de trabajo en el lado del servidor. Si está usando php, puede usar:

• Progreso de carga de sesión para php5.4 +
• Subir paquete de progreso para php <5.4

Si usa nginx también puede optar por compilar con su módulo de progreso de carga

Todos estos funcionan de la misma manera: cada carga tiene un UID, usted solicitará el ''progreso'' asociado con ese ID a intervalos regulares a través de ajax. Esto devolverá el progreso de carga según lo determinado por el servidor.