Chrome文件上传错误：更改事件不会使用同一文件执行两次

我正在处理这个html5文件上传器插件，但它有一个谷歌Chrome的错误，我无法理解和解决它。 它适用于Firefox。

jsfiddle链接

问题是您无法从桌面上载两次相同的文件。

当您第一次单击，选择，然后单击确定以从桌面上载文件时，它应该警告消息，例如’.button-1′ – 取决于您单击的上载按钮。

然后，如果您尝试再次上传相同的文件 ，这行代码将不再执行，

$(".upload-file",object_parent).change(function() { ... ... alert($cm.selector); }); 

知道这个插件出了什么问题吗？

 (function($){ // Attach this new method to jQuery $.fn.extend({ // This is where you write your plugin's name upload_file_html5: function(options) { // Set the default values, use comma to separate the settings, example: var defaults = { objectSuperparent: '.media' } var options = $.extend(defaults, options); var o = options; var $cm = this.click(function(e){ //  button is the object in this case. var object = $(this); // Get other info from the element belong to this object group. var object_href = object.attr('href'); var object_parent = object.parent(); alert($cm.selector); // Trigger the click event on the element. // Due to security policies triggering click on the input type=file is not allowed/supported in some browsers and Opera is one of them. //$('input[type=file]').trigger('click'); // or: $(".upload-file",object_parent).click(); return false; }); // Trigger ajax post when ever the file is changed by the user. var $cm_2 = $(".upload-file").change(function(){ //  is the object in this case. var object = $(this); var object_form = object.parent(); var object_superparent = object.parents(o.objectSuperparent); var path_config = $($cm.selector,object_superparent).attr('href'); var path_post = object_form.attr('action'); alert($cm.selector); //alert(path_config); .... .... }); } }); })(jQuery); 

它在Chrome上工作正常，但最近才失败，可能是Chrome已将最新版本更新到我的机器，此更新导致错误？

Answer 1

是。 我的Chrome与Firefox有不同的行为，但我认为Chrome是正确的。

根据W3C的文件 ：

当控件失去输入焦点并且自获得焦点后其值已被修改时，会发生onchange事件

如果您尝试上载相同的文件，则文件输入的值不会更改。 尝试将其打印出来：

 $('.button-2').click(function(){ console.log($(".list .upload-file").val()) return false; }); 

Answer 2

如果要上传两次，请清除文件输入值

 $('input[type="file"]').val(null); 

jsfiddle测试

Answer 3

可能是正在重新渲染输入。 无论出于何种原因，这对我来说都是无关紧要的。 $ .on（’更改’，回调）function丢失了。

尝试使用我非常喜欢的.delegatefunction！ http://api.jquery.com/delegate/

好吧所以委托是完全一样的，它只是告诉jquery是否有一个元素在屏幕上呈现具有特定句柄，附加一个function。

因此，即使重新渲染元素，它仍将继续运行。

 $(document).delegate('.file_upload_btn', 'change', function(){}); 

你可能认为这是一个扔掉的function，并说有什么区别，但这为我节省了很多时间在项目上。