我允许用户将多个文件添加到表单文件字段。他们还可以在添加文件后删除它们。但是,如果他们尝试重新添加他们删除的文件,则不会重新添加该文件,但他们可以在其系统上添加另一个文件:
<form class="form-inline" enctype="multipart/form-data" action="/records" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓">
Browse File<input type="file" name="file" id="file" multiple="multiple" class="multi-file-upload">
<ul class="file-multiple-display" style="width: 200px; min-height: 50px; background: #fff; border-radius: 5px; margin: 0;"></ul>
</form>
JavaScript的:
Utilities.multifile_upload = function (multifile) {
var $multifile = (multifile instanceof jQuery)? multifile : $(multifile);
var $form = $multifile.closest('form');
var file_cache = {};
var counter = 0;
return {
track: function(){
$multifile.change(function(){
for (var i = 0; i < this.files.length; i++) {
file_cache[counter++] = this.files[i];
$('.file-multiple-display').append('<div id="file_'+ counter +'"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[i].name + ' <span class="fa fa-times-circle fa-lg closeBtn remove-line" title="remove"></span></div>');
}
})
},
remove: function(){
$form.on('click', '.remove-line', function(){
var container = $(this).closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete file_cache[index];
})
},
submit: function(){
var formData = new FormData();
for (var i = 0; i < file_cache.length; i++) { formData.append('file[]', file_cache[i], file_cache[i].name) }
},
init: function(){
this.track();
this.remove();
this.submit();
}
}
这种行为的原因是什么?我该如何解决这个问题?