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.