fileupload - jquery file upload example

Borrar archivos programáticamente con jquery fileupload basic

Question

Estoy usando el complemento de carga de archivos blueimp (la versión básica) para implementar la carga de archivos múltiples. Estoy tratando de implementar una funcionalidad que permita al usuario eliminar archivos en cola para cargar. No puedo averiguar cómo acceder a la matriz de archivos adecuadamente. Cada vez que se agrega la devolución de llamada, el índice es 0 y la longitud de la matriz de archivos es 1 (solo contiene el archivo que el usuario hizo clic para eliminar). Estoy agregando un enlace para cada archivo en cola a un div, que se puede hacer clic y debería eliminar el archivo si se hace clic.

Mi idea fue crear un enlace de eliminación con el índice del archivo y eliminarlo de la matriz, pero debido al problema mencionado anteriormente, el índice nunca es correcto. También lo he intentado con el nombre de archivo, pero el nombre de archivo en la devolución de llamada "en" es siempre el primer archivo que se seleccionó para la carga;

¿Cómo elimino programáticamente los archivos de la cola de carga?

HTML:

<div id="fileBrowserWrapper">
<form id="myForm" action="#" method="post" enctype="multipart/form-data">
<input id="uploadDocBrowse" type="file" name="files[]" multiple/>
</form>
</div>
<div id="inputFilesBox"></div>
<div id="uploadFilesBox"></div>

Y el archivo de subida de JavaScript:

$(''#myForm'').fileupload({
url: "/SomeHandler",
dataType: ''html'',
autoUpload: false,
singleFileUploads: false,
replaceFileInput: false,
add: function (e, data) {
console.log("Number of files: " + data.files.length);
$.each(data.files, function (index, file) {
$(''#uploadFilesBox'').append("<div class=''uploadBox'' id=''fileDiv_" + file.name + "''><div class=''leftEle''><a href=''#'' id=''link_" + index + "'' class=''removeFile''>Remove</a></div><div class=''midEle''>" + file.name + "</div></div>")
.on(''click'', { filename: file.name, files: data.files }, function(event) {
var uploadFilesBox = $("#uploadFilesBox");
var remDiv = $("#fileDiv_" + event.data.filename);
remDiv.remove();
event.data.files.splice(0, 1);
}
});
});
data.context = $(''#myButton'')
.click(function () {
data.submit();
});
});

Answer 1

Gracias por eso @Furynation.

Lo que hice fue similar a tu enfoque. Para cada archivo que seleccione, agrego una fila a una tabla (envío de carga previa). Esta fila la asigno al data.context para usar para uso posterior.

Consulte: https://github.com/blueimp/jQuery-File-Upload/issues/3083

Mi fragmento de código está en el controlador de devolución de llamada:

 $("#upload").click(function () {
if (data.files.length > 0) {
data.submit();
}
});
data.context.find(''a'').on(''click'',function (event) {
event.preventDefault();
data.context.remove();
data.files.length = 0;
});

Esto elimina la fila de la tabla y restablece la matriz.

Si hay una forma más limpia, por favor hágamelo saber.

Answer 2

Resolví esto. Aquí está la solución con descripción:

Encontré mi solución después de jugar un poco más con ella. La clave fue recordar que estaba en una llamada de vuelta. Así que en el controlador de eventos para la funcionalidad de eliminación, acabo de poner a cero la matriz data.files, y en el envío de ese controlador, solo envío si la matriz de archivos tiene una longitud mayor que 0. Limpié la función del controlador de eventos para Es más fácil en los ojos. HTML no ha cambiado.

Nuevo código de manejo de JavaScript:

 $(''#myForm'').fileupload({
url: "/SomeUrl",
dataType: ''html'',
add: function (e, data) {
$.each(data.files, function (index, file) {
var newFileDiv = $("<div class=''uploadBox'' id=''fileDiv_" + file.name + "''><div class=''leftEle''><a href=''#'' id=''link_" + index + "'' class=''removeFile''>Remove</a></div><div class=''midEle''>" + file.name + "</div></div>");
$(''#uploadFilesBox'').append(newFileDiv);
newFileDiv.find(''a'').on(''click'', { filename: file.name, files: data.files }, function (event) {
event.preventDefault();
var uploadFilesBox = $("#uploadFilesBox");
var remDiv = $(document.getElementById("fileDiv_" + event.data.filename));
remDiv.remove();
data.files.length = 0; //zero out the files array
});
data.context = newFileDiv;
});
$(''#myButton'')
.click(function () {
if (data.files.length > 0) { //only submit if we have something to upload
data.submit();
}
});
}
});

Answer 3

Funciona para mí con varios archivos : comprueba todos los archivos y no se rompe cuando el archivo con error es uno en medio de todos los archivos (como .splice() o .lenght=0 do). La idea es: haga la validación -> si error: marque el índice del archivo con el error -> después de todos los archivos / antes de cargar: elimine / elimine los índices / archivos incorrectos por $.grep() -> cargue los archivos buenos juntos. singleFileUploads: false .

$(this).fileupload({
// ...
singleFileUploads: false, // << send all together, not single
// ...
add: function (e, data) {
// array with all indexes of files with errors
var error_uploads_indexes = [];
// when add file - each file
$.each(data.files, function(index, file) {
// array for all errors - in example is only one: size
var uploadErrors = [];
// ... validation
// check size
if(data.files[index][''size''] > 1048576) {
uploadErrors.push(''Filesize is too big'');
};
// ...
// when errors
if(uploadErrors.length > 0) {
// mark index of error file
error_uploads_indexes.push(index);
// alert error
alert(uploadErrors.join("/n"));
};
}); // << each
// remove indexes (files) with error
data.files = $.grep( data.files, function( n, i ) {
return $.inArray(i, error_uploads_indexes) ==-1;
});
// if are files to upload
if(data.files.length){
// upload by ajax
var jqXHR = data.submit().done(function (result, textStatus, jqXHR) {
//...
alert(''done!'') ;
// ...
});
} //
},
// ...
}); // << file_upload