这其实很简单。

document.querySelector('#input-field').value = '';

将该值设置为“并不适用于所有浏览器。

相反，尝试将值设置为null，如下所示:

document.getElementById('your_input_id').value= null;

编辑: 我得到了不允许JS设置文件输入的非常有效的安全原因，但是提供一个简单的机制来清除已经选择的输出似乎是合理的。我尝试使用空字符串，但它在所有浏览器中都不起作用，NULL在我尝试过的所有浏览器中都起作用(Opera, Chrome, FF, IE11+和Safari)。

编辑: 请注意，设置为NULL在所有浏览器上都有效，而设置为空字符串则不行。

我尝试了大多数的解决方案，但似乎没有人工作。然而，我在下面找到了一个散步的地方。

表单的结构是:form =>标签，输入和提交按钮。在我们选择了一个文件之后，该文件名将通过在JavaScript中手动执行的操作由标签显示。

所以我的策略是:最初提交按钮是禁用的，在文件被选中后，提交按钮禁用属性将被移除，这样我就可以提交文件了。提交后，我清除了标签，这使它看起来像是我清除了文件输入，但实际上不是。然后我将再次禁用提交按钮，以防止提交表单。

通过将提交按钮设置为禁用或不禁用，我可以多次停止提交文件，除非我选择另一个文件。

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

将value property设置为空或空。 适用于IE11+和其他现代浏览器。 创建一个新的文件输入元素并替换旧的输入元素。 缺点是您将失去事件侦听器和expando属性。 通过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'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

我一直在寻找简单而干净的方法来清除HTML文件输入，上面的答案是伟大的，但没有一个真正回答我在寻找什么，直到我在网络上遇到了一个简单而优雅的方法来做到这一点:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

这一切都要归功于克里斯·科伊尔。

// Referneces var control = $("#control"), clearBn = $("#clear"); // Setup the clear functionality clearBn.on("click", function(){ control.replaceWith( control.val('').clone( true ) ); }); // Some bound handlers to preserve when cloning control.on({ change: function(){ console.log( "Changed" ) }, focus: function(){ console.log( "Focus" ) } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="control"> <br><br> <a href="#" id="clear">Clear</a>

将值设为null或像这样的空字符串' '，以清除单个输入元素的值 您可以使用HTML按钮使用<input type= " reset " >属性轻松重置所有表单值。 HTMLFormElement.reset()方法可以恢复表单元素的默认值。此方法的作用与单击表单控件相同。

清除整个输入字段，而不必手动删除整个东西，或者如果在输入字段中已经有一个用户不想要的预先建议的输入。可能有很多情况。

您可以将此作为一个实际示例来尝试

const fileInputElement = document.getElementById('file-input'); const formElement = document.getElementById('input-form'); // Method-1: Clear files // fileInputElement.value = ''; // Method-2: Clear files // fileInputElement.value = null; // Method-3: Clear files - on event listener fileInputElement.addEventListener('change', (event)=>{ // If the file did not meet certain condition event.target.value = ''; }); // Method-4: Clear or reset whole form formElement.addEventListener('submit', (event)=>{ // If ajax call is failed to make request event.target.reset(); // or // formElement.reset() }); .form{ display: flex; flex-direction: column; width: 80%; margin-left: 10%; } #file-input, .form-control{ margin-top: 1rem; } .form-control{ padding: 1em 0; } #file-input{ background: #ccccff; } #file-input::-webkit-file-upload-button { background: #000033; color: white; padding: 1em; } .button-group{ display: flex; justify-content: start; } .btn{ background: #004d4d; color: white; width: 4rem !important; margin-right: 10px; } <form id='input-form' class='form' > <input type='file' id='file-input' /> <input type='text' class='form-control' id='text-input' placeholder='your name' /> <div class='button-group'> <button type='reset' class='form-control btn' id='reset-form'>Reset</button> <button type='submit' class='form-control btn' id='submit-form'>Submit</button> </div> </form>