无法重新添加已删除的表单文件

时间:2017-06-20 23:46:13

标签: javascript jquery html5

我允许用户将多个文件添加到表单文件字段。他们还可以在添加文件后删除它们。但是,如果他们尝试重新添加他们删除的文件,则不会重新添加该文件,但他们可以在其系统上添加另一个文件:

<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 + '&nbsp;&nbsp;<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();
        }
    }

这种行为的原因是什么?我该如何解决这个问题?

0 个答案:

没有答案