Javascript Jquery如何在我自己的上传插件中清理formData对象

我尝试创建自己的插件，通过ajax上传文件。
如果有输入文件的页面在上传后重新加载，它似乎工作正常。
如果在上传后没有重新加载输入文件所在的页面（因为只重新加载了ajax内容），IE和Chrome会出现问题，因为要上传的文件会附加到之前刚刚上传的页面（使用firefox是可以的）。
我试图通过在第一次上传后清理输入文件来修复它，但这样一来，使用IE和Chrome，我就不能再上传其他文件了

我的计划

complete: function () {
       defaults.onFinish.call(this);
       // If page where is the input file not reloaded
       // after upload files IE and Chrome not working
       $this.replaceWith($this.val('').clone(true));
       $this.val('');
}

事实上，每次上传后我都会清理formData对象，但我一直没能做到

我的插件

;(function ($, window, document, undefined) {

    // Function-level strict mode syntax
    'use strict';

    $.fn.ajaxUpload = function(options) {

        var defaults = {
            num_files       : 0,
            max_files       : 2,
            max_concurrent  : 10,
            max_filesize    : 1024 * 4096,
            php_max_size    : 1024 * 8192,
            allowed_types   : ['jpeg','jpg'],
            ajax_url        : 'action.php',
            var_name        : 'file',
            extra_fields    : {},
            onFinish        : function() {}
        };

        var options = $.extend(defaults, options);

        return this.each(function() {

            var $this = $(this);

            $this.on('change', function() {

                var files = $this[0].files;
                var len = files.length;
                var items = 0;
                var diff_files = parseInt(defaults.max_files - defaults.num_files - len);

                if(diff_files < 0) {
                    return false;
                }
                if(!maxUploadFiles(len, defaults.max_concurrent)) {
                    return false;
                }
                var formdata = new FormData();

                jQuery.each(files, function(i, file) {
                    if(!isOverSized(file, defaults.max_filesize)) {
                        return false;
                    }
                    if(!isAllowedTypes(file, defaults.allowed_types)) {
                        return false;
                    }
                    if(!totalFilesSize(file, defaults.php_max_size)) {
                        return false;
                    }

                    formdata.append(defaults.var_name + '['+i+']', file);
                    items++;
                });

                // Append extra data to formdata
                $.each(defaults.extra_fields, function(name, value) {
                    formdata.append(name, value);
                });

                // Check that files have passed all test
                if (len != items) { return false; }

                $.ajax({
                    url: defaults.ajax_url,
                    data: formdata,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    beforeSend: function () {
                    },
                    success: function(data) {
                        totalSize = 0;
                    },
                    complete: function () {
                        defaults.onFinish.call(this);

                        // If page where is the input file not reloaded
                        // after upload files IE and Chrome not working
                        //$this.replaceWith($this.val('').clone(true));
                        //$this.val('');
                    }
                });

            });
       });
    };

    var totalSize = 0;

    function totalFilesSize(file, php_max_size) {
        totalSize += file.size;
        if(totalSize > php_max_size) {
            totalSize = 0;
            return false;
        }
        return true;
    }
    function maxUploadFiles(len, max_concurrent) {
        if(len > max_concurrent) {
            return false;
        }
        return true;
    }
    function isAllowedTypes(file, allowed_types) {
        var ext = file.name.split('.').pop().toLowerCase();
        if(jQuery.inArray(ext, allowed_types) < 0) {
            return false;
        }
        return true;
    }
    function isOverSized(file, max_filesize) {
        if(file.size > max_filesize) {
            return false;
        }
        return true;
    }

})(jQuery, window, document);

；（函数（$，窗口，文档，未定义）{
//函数级严格模式语法
"严格使用",；
$.fn.ajaxUpload=函数（选项）{
var默认值={
num_文件：0，
最大文件数：2，
最大并发时间：10，
最大文件大小：1024*4096，
php_max_size:1024*8192，
允许的_类型：['jpeg'，'jpg']，
ajax_url:'action.php'，
变量名称：“文件”，
额外_字段：{}，
onFinish:function（）{}
};
var options=$.extend（默认值，选项）；
返回此值。每个（函数（）{
var$this=$（this）；
$this.on（'change'，function（）{
var files=$this[0]。文件；
var len=files.length；
var项目=0；
var diff_files=parseInt（defaults.max_files-defaults.num_files-len）；
如果（差异文件<0）{
返回false；
}
如果（！maxUploadFiles（len，defaults.max\u concurrent））{
返回false；
}
var formdata=new formdata（）；
每个（文件，函数（i，文件）{
如果（！isOverSized（文件，默认值.max_filesize））{
返回false；
}
如果（！isAllowedTypes（文件，默认值。允许的类型））{
返回false；
}
如果（！totalFileSize（file，defaults.php_max_size））{
返回false；
}
append（defaults.var_name+'['+i+']'，文件）；
项目++；
});
//将额外数据附加到formdata
$.each（默认值.extra_字段、函数（名称、值）{
formdata.append（名称、值）；
});
//检查文件是否通过了所有测试
如果（len！=items）{return false；}
$.ajax({
url:defaults.ajax\u url，
数据：formdata，
cache:false，
contentType:false，
processData:false，
键入：“POST”，
beforeSend:函数（）{
},
成功：功能（数据）{
totalSize=0；
},
完成：函数（）{
defaults.onFinish.call（这个）；
//如果页面未重新加载输入文件，则在哪里
//上传文件后IE和Chrome不工作
//$this.replaceWith（$this.val（“”）.clone（true））；
//$this.val（“”）；
}
});
});
});
};
var totalSize=0；
函数TotalFileSize（文件，php\u max\u大小）{
totalSize+=file.size；
if（totalSize>php\u max\u size）{
totalSize=0；
返回false；
}
返回true；
}
函数maxUploadFiles（len，max_并发）{
如果（长度>最大并发）{
返回false；
}
返回true；
}
函数isAllowedTypes（文件、允许的类型）{
var ext=file.name.split（'.'）.pop（）.toLowerCase（）；
if（jQuery.inArray（ext，允许的类型）<0）{
返回false；
}
返回true；
}
函数版本化（文件，最大文件大小）{
如果（file.size>max_filesize）{
返回false；
}
返回true；
}
})（jQuery、窗口、文档）；

根据你的说法，我应该做些什么来解决我的问题？ 多谢各位

编辑

我在complete上添加了这一行，它似乎起作用了

$this.val('');
$this.wrap('<form>').parent('form').trigger('reset');
$this.unwrap();
$this.replaceWith($this.clone());

$this.val（“”）；
$this.wrap（“”）.parent（'form'）.trigger（'reset'）；
$this.unwrap（）；
$this.replaceWith（$this.clone（））；

插件的问题在于，您使用

$this

保留了对原始输入的引用，然后试图用克隆替换它。因为您正在进行克隆，所以最好每次都获得一个新的引用，所以您应该解除绑定并绑定

(function ($, window, document, undefined) {

    // Function-level strict mode syntax
    'use strict';

    $.fn.ajaxUpload = function (options) {

        var defaults = {
            num_files: 0,
            max_files: 2,
            max_concurrent: 10,
            max_filesize: 1024 * 4096,
            php_max_size: 1024 * 8192,
            allowed_types: ['jpeg', 'jpg'],
            ajax_url: 'action.php',
            var_name: 'file',
            extra_fields: {},
            onFinish: function () {}
        };

        var options = $.extend(defaults, options);

        var bindInput = function (elem) {
            var element = $(elem),
            bindFunc = function (evt) {

                var files = evt.currentTarget.files;
                var len = files.length;
                var items = 0;
                var diff_files = parseInt(defaults.max_files - defaults.num_files - len);

                 if (diff_files < 0) {
                     return false;
                 }
                 if (!maxUploadFiles(len, defaults.max_concurrent)) {
                     return false;
                 }
                 var formdata = new FormData();

                 jQuery.each(files, function (i, file) {
                     if (!isOverSized(file, defaults.max_filesize)) {
                         return false;
                     }
                     if (!isAllowedTypes(file, defaults.allowed_types)) {
                         return false;
                     }
                     if (!totalFilesSize(file, defaults.php_max_size)) {
                         return false;
                     }

                     formdata.append(defaults.var_name + '[' + i + ']', file);
                     items++;
                 });

                 // Append extra data to formdata
                 $.each(defaults.extra_fields, function (name, value) {
                     formdata.append(name, value);
                 });

                 // Check that files have passed all test
                 if (len != items) {
                     return false;
                 }

                 $.ajax({
                     url: defaults.ajax_url,
                     data: formdata,
                     cache: false,
                     contentType: false,
                     processData: false,
                     type: 'POST',
                     beforeSend: function () {},
                     success: function (data) {
                         totalSize = 0;
                     },
                     complete: function () {
                         defaults.onFinish.call(this);
                         var previous = $(evt.currentTarget);
                         previous.off('change', bindFunc);
                         var newElem = previous.val('').clone(true)
                         previous.replaceWith(newElem);
                         bindInput(newElem);

                     }
                 });

             };
             element.on('change', bindFunc);
         };

         return this.each(function () {
             bindInput(this)
         });
    };

    var totalSize = 0;

    function totalFilesSize(file, php_max_size) {
        totalSize += file.size;
        if (totalSize > php_max_size) {
            totalSize = 0;
            return false;
        }
        return true;
    }

    function maxUploadFiles(len, max_concurrent) {
        if (len > max_concurrent) {
            return false;
        }
        return true;
    }

    function isAllowedTypes(file, allowed_types) {
        var ext = file.name.split('.').pop().toLowerCase();
        if (jQuery.inArray(ext, allowed_types) < 0) {
            return false;
        }
        return true;
    }

    function isOverSized(file, max_filesize) {
        if (file.size > max_filesize) {
            return false;
        }
        return true;
    }

})(jQuery, window, document);

（函数（$，窗口，文档，未定义）{
//函数级严格模式语法
"严格使用",；
$.fn.ajaxUpload=函数（选项）{
var默认值={
num_文件：0，
最大文件数：2，
最大并发时间：10，
最大文件大小：1024*4096，
php_max_size:1024*8192，
允许的_类型：['jpeg'，'jpg']，
ajax_url:'action.php'，
变量名称：“文件”，
额外_字段：{}，
onFinish:function（）{}
};
var options=$.extend（默认值，选项）；
var bindInput=函数（元素）{
变量元素=$（元素），
bindFunc=函数（evt）{
var files=evt.currentTarget.files；
var len=files.length；
var项目=0；
var diff_files=parseInt（defaults.max_files-defaults.num_files-len）；
如果（差异文件<0）{
返回false；
input.wrap('<form>').parent('form').trigger('reset');
input.unwrap();

complete: function () {
    defaults.onFinish.call(this);
    $this.wrap('<form>').parent('form').trigger('reset');
    $this.unwrap();
}