将值设为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>

将值设为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>

我改变了类型文本和返回类型文件使用setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}

这是我的两分钱，输入文件存储为数组，这里是如何将其为空

document.getElementById('selector').value = []

返回一个空数组，适用于所有浏览器

在我的世界里，一个简单干净的解决方案是，将文件输入文件设置为一个清晰的FileList。

编辑:正如SteJ所说，这不是与Safari合作。

由于我们不能直接创建FileList - I用户DataTransfer作为“hack”

@$input[0].files=new DataTransfer().files 

or

file_input_node.files=new DataTransfer().files 

我也有同样的问题，我想出了这个。

var file = document.querySelector('input'); var emptyFile = document.createElement('input'); emptyFile。Type = 'file'; document.querySelector(“按钮”)。Onclick = function(){ 文件。文件= emptyFile.files; ｝ <输入类型=“文件”> < >按钮明确> < /按钮