我想清除我的表单中的文件输入。

我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。

注意:我希望避免重新加载页面、重置表单或执行AJAX调用。

这可能吗?


当前回答

输入。Value = null是一个工作方法,但是如果从onclick事件调用它,它只会触发输入的change事件。

解决方案是在需要重置输入时手动调用onchange处理程序。

function reset_input(input) {
    $(input)[0].value = null;
    input_change_handler();
}
function input_change_handler() {
    // this happens when there's been a change in file selection

    if ($(input)[0].files.length) {
        // file(s) selected
    } else {
        // nothing is selected
    }
}
$(input).on('change', input_change_handler);

其他回答

你需要用新的文件输入替换它。 下面是如何用jQuery完成的:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

当你需要清除输入字段时使用这一行(例如在某些事件上):

inputFile.parent().html( inputFile.parent().html() );

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

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

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

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

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

试试这个简单的方法,它会奏效的

let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;

这将重置输入

解决方案

下面的代码是用jQuery编写的。它适用于所有浏览器,并允许保存事件和自定义属性。

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

有关代码和演示,请参阅jsFiddle。

链接

使用jQuery清除<input type='file' /> 如何用JavaScript重置文件输入

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

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

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

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