为什么不重置文件输入栏？ [英] Why doesn't IE reset file input field?

问题描述

我修改了当前表单，以便在用户选择要上传的文件后触发表单提交。上传完成后，我打电话：

  $（'＃file'）。val（''）; 
  

重置文件输入栏。

 HTML 
   

这适用于Chrome，FF和Safari，但在IE中不起作用。有没有解决方法或更好的解决方案的IE？

解决方案

您不能更改文件输入类型的值这会引起安全漏洞。相反，只需用新的文件输入替换。而不是 $（'＃file'）。val（''），这样做：

  $（'＃file'）。replaceWith（'< input name =filetype =fileid =file/>'）; 
  

更好的方法是复制原始版本的副本并将其存储在内存中。当您需要替换它时，只需使用克隆副本，然后再克隆它。所以，就像这样：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $（$）$ （'）'）。clone（）;
$ b $（'＃the-form'）。on（'change'，'#file'，function（el）{
$ （）;
}）;
（）; //假设目标是隐藏的iframe
$（this）.replaceWith（empty_input.clone（））;
}）;
}）

请注意，我使用委托版本与 jQuery.on（），所以这个事件在被替换之后仍然可以在新的输入上运行。

I've modified my current form to trigger a form submission after a user chooses a file for upload. After the upload is complete I call:

$('#file').val('');

to reset the file input field.

HTML
<input name="file" type="file" id="file"/>

This works on Chrome, FF, and Safari but doesn't work in IE. Is there a workaround or a better solution for IE?

解决方案

You can't change the value of a file input type, as that would introduce a security vulnerability. Instead, just replace the file input with a new one. Instead of $('#file').val(''), do this:

$('#file').replaceWith('<input name="file" type="file" id="file"/>');

Even better would be to clone a copy of the original version and store it in memory. When you need to replace it, just used the cloned copy, and again clone it. So, something like this:

$(document).ready(function() {
    var empty_input = $('#file').clone();

    $('#the-form').on('change', '#file', function(el) {
        $('#the-form').submit(); // assuming the target is a hidden iframe
        $(this).replaceWith(empty_input.clone());
    });
})

Note that I'm using the delegated version with jQuery.on() so the event will still work on the new input right after it's replaced.

这篇关于为什么不重置文件输入栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！