0
我使用ajaxForm插件進行多次上傳。上傳完美,甚至可以將文件添加到列表並刪除。使用ajaxForm插件的多個上傳文件
問題是,當添加例如3個文件,並刪除其中一個列表是從3上傳,也就是說,它不是刪除「刪除」文件。
var myFiles = [];
var formData;
$('#images').on('change',function(){
var files = this.files.length;
if (files > 5) {
alert("Select only 5 files at a time.");
} else {
for (var i = 0; i < files; i++) {
name = this.files[i].name;
size = this.files[i].size;
type = this.files[i].type;
if (size > 5242880) {
alert("The file "+name+" exceeds the limit of 5mb");
} else if (type != 'image/png' && type != 'image/jpg' && type != 'image/gif' && type != 'image/jpeg') {
alert("The file "+ name +" must be of type JPG, GIF or PNG.");
} else {
$('.list').append('<span>'+name+' - <a href="javascript:;" data-file="'+name+'" title="Excluir" class="delFile">X</a><br></span>');
$('.list').show();
removeFile();
myFiles.push(this.files[i]);
console.log(myFiles);
}
}
}
});
$('#multiple_upload_form').submit(function(){
formData = new FormData();
formData.append('name', $('#name').val());
formData.append('phone', $('#phone').val());
for (var i = 0; i < myFiles.length; i++) {
formData.append('files', myFiles[i]);
}
});
$('#multiple_upload_form').ajaxForm({
target:'#images_preview',
data: formData,
url: 'upload.php',
beforeSubmit:function(formData, jqForm, options){
$('.uploading').show();
console.log(formData);
},
success:function(responseText, statusText, xhr, $form){
$('.uploading').hide();
},
error:function(e){
}
});
function removeFile() {
$('.delFile').click(function() {
var file = $(this).data("file");
for (var i=0;i<myFiles.length;i++) {
if (myFiles[i].name === file) {
myFiles.splice(i,1);
break;
}
}
console.log(myFiles);
$(this).parent().remove();
});
}