如何使用 JavaScript 或 HTML 将文件输入设置为空？答案

【问题标题】：How do you set file input to nothing with JavaScript or HTML?如何使用 JavaScript 或 HTML 将文件输入设置为空？
【发布时间】：2010-11-23 10:40:07
【问题描述】：

在我正在开发的网站上，我有一个文件输入，用户可以从中上传文件。它使用“Ajax”（不是真的）将文件发送到绑定到 iframe 的 php 文件。我的问题是 Firefox 会自动填写文件输入元素。有没有一种方法可以让用户选择单击提交按钮而不发送文件？或者我是否以某种方式将文件值设置为 null 并在 php 文件中检查它？我的代码如下所示：

    Name: <input type='text' id='name'><br>
    Description: <textarea id='description' rows=10 columns=100></textarea><br>
    <form id="upload_form" method="post" enctype="multipart/form-data" action="uploadfile.php">
    <input type='hidden' value='' id='descriptionid' name='descriptionid'>
    <input type='file' name="file" id="file" size="27" value="">
    <input type='submit' value='Submit' onclick=';' id='submitPopup'>
    </form>

当按钮被点击时，它会运行一个 JavaScript 方法并获取名称和描述的值，并提交输入表单。如何让用户可以选择上传文件，而不是让浏览器自动填写？

【问题讨论】：

标签： javascript html file input

【解决方案1】：

作为一项安全措施，不允许读取或设置file 输入字段的值。但是，如果您致电form.reset()，它将为您清除。

您甚至可以遍历所有其他输入，记住它们的值，重置表单，然后重新填充其他输入，因此只有 files 被清除。

【讨论】：

@nickf：你有没有说明不允许设置文件输入字段的值的参考？

【解决方案2】：

为安全起见，您不能在输入类型文件中手动或通过 JavaScript 输入数据。

【讨论】：

【解决方案3】：

我在另一个话题中回答了这个问题：how to clear file input with javascript?

使用 javascript 清除文件输入有 3 种方法：

将 value 属性设置为空或 null。

适用于 IE11+ 和其他现代浏览器。
创建一个新的文件输入元素并替换旧的。

缺点是您将丢失事件侦听器和扩展属性。
通过 form.reset() 方法重置所有者表单。

为了避免影响同一个所有者表单中的其他输入元素，我们可以创建一个新的空表单并将文件输入元素附加到这个新表单并重置它。这种方式适用于所有浏览器。

我写了一个javascript函数。 演示： http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){
        }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'), ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            ref.parentNode.insertBefore(f,ref);
        }
    }
}

【讨论】：