[英]Jquery multiple file upload issue
我正在使用Jquery File Upload插件上传文件,这是从服务器获取文件并生成HTML并插入到元素中的方法:
getFilesToHolders:function (id,tablesName) {
//attachecedFiles is a container for the generated html
var attachedFiles = $('#IDAttachedfiles');
// clears this area in case of multiple file upload
attachedFiles.html('');
attachments.getFiles(id,tablesName,function(data) {
// getFiles just does an ajax request
var template = '<li class="list-group-item"><b>File:</b> <span class="filenameClassAtt"></span> | <b>Extension:</b> <span class="label label-warning extensionAttachedFile"></span> <a href="" class="pull-right attachment-remove-class" style="padding-left:10px; color:#e74c3c;"><i class="fa fa-remove "></i></a> <a class="pull-right download-attachment-class" href=""><i class="fa fa-download"></i></a></li>';
if (!data.length) {
attachedFiles.html('<h2>No files</h2>');
return;
}
$.each(data, function(index, val) {
var newTemp = $(template);
newTemp.find('.filenameClassAtt').html(val.url);
newTemp.find('.extensionAttachedFile').html(val.extension);
newTemp.find('.download-attachment-class').attr({
'id': 'IDAttachmentDownload-'+val.id,
'data-tabel-name': val.table_name,
'data-record-id' :val.record_id
});;
newTemp.find('.attachment-remove-class').attr({
'id': 'IDAttachmentDelete-'+val.id,
'data-tabel-name': val.table_name,
'data-record-id' :val.record_id
});
attachedFiles.append(newTemp);
});
});
},
这是在文件上传后执行的方法:
done: function (e, data) {
var data = data.result;
if (data.success == 1) {
attachments.getFilesToHolders(data.record_id,data.table_name);
swal(data.data,false,'success');
}else{
app.helper.displayErrors(data);
}
},
并且此方法利用上述方法在上传后将文件加载到页面上,因此,这里的问题是当我上传多个文件时,done方法会执行多次,并且由于某种原因,上传后生成的文件列表会乘以即使getFilesToHolders
方法每次将div称为attachedFiles.html('');
都会清除div,我上传的文件也是如此attachedFiles.html('');
所以我不知道为什么列表被复制,这是sceenshot:
在这里,我只上传了4个文件,但页面上有16个文件,从服务器端来看还可以,在上传后再获取文件时,它也可以正常显示4之4
问题出在异步性上, done
函数是异步触发的,所以我的getFile函数在“队列”中,解决方法是放置attachedFiles.html('');
在getFile函数中,因此它将擦除所有内容并重新开始,并填充div;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.