如何使用JavaScript清除HTML文件输入？

Question

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

我知道将源设置为相同的方法......但该方法不会擦除所选的文件路径.

注意:我想避免重新加载页面,重置表单或执行AJAX调用.

这可能吗？

Answer 1

有三种方法可以使用javascript清除文件输入:

1. 将value属性设置为空或null.

   适用于IE11 +和其他现代浏览器.

2. 创建一个新的文件输入元素并替换旧的.

   缺点是您将丢失事件侦听器和expando属性.

3. 通过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);
        }
    }
}

Answer 2

怎么样:

input.value = '';

我还是要明白为什么这并不能一起工作的WebKit.

无论如何,这适用于IE9>,Firefox和Opera.
webkit的情况是我似乎无法将其更改回文件.
使用IE8,情况是它会引发安全异常.

编辑: 对于webkit,Opera和Firefox这是有效的,但是:

input.type = "text";
input.type = "file";

(用这个提议检查上面的答案)

我会看看我是否能找到一种更好的清洁方式来完成这种跨浏览器而无需使用GC.

EDIT2:

input.value = '';

适用于大多数浏览器.不适用于IE <9,就是这样.
测试了firefox 20,chrome 24,opera 12,IE7,IE8,IE9和IE10.

Answer 3

将值设置为''不适用于所有浏览器.

而是尝试将值设置为null如下:

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

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

编辑:请注意,设置为NULL空字符串时设置适用于所有浏览器没有.

Answer 4

不幸的是,上述答案似乎都没有涵盖所有基础 - 至少不是我用vanilla javascript测试.

• .value = null似乎适用于FireFox,Chome,Opera和IE11(但不是 IE8/9/10 )

• .cloneNode(并.clone()在jQuery中)FireFox似乎复制.value过来,因此使克隆无意义.

所以这里是我编写的vanilla javascript函数,适用于FireFox(27和28),Chrome(33),IE(8,9,10,11),Opera(17)......这些是目前唯一可用的浏览器给我测试.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

该ctrl参数是文件输入本身,所以该函数将被称为...

clearFileInput(document.getElementById("myFileInput"));

Answer 5

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

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

当您需要清除输入字段时(例如某些事件),请使用此行:

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

Answer 6

解

以下代码适用于jQuery.它适用于每个浏览器,并允许保留事件和自定义属性.

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

DEMO

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

链接

• 使用jQuery清除<input type ='file'/>

• 如何使用JavaScript重置文件输入

Answer 7

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

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

这将返回一个空数组并适用于所有浏览器

Answer 8

如何删除该节点,创建一个具有相同名称的新节点？

Answer 9

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

编辑:
这个在IE和Opera中不起作用,但似乎适用于firefox,safari和chrome.

Answer 10

这input.value = null是一种工作方法，但是change如果从onclick事件调用它只会触发输入的事件。

解决方案是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);

Answer 11

这其实很容易。

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

Answer 12

我遇到了同样的问题，我想出了这个。

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

Answer 13

这对我有用。

const clear = (event) =>{event.target.value = [ ];}
clear("input_id"); 

Answer 14

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

编辑：正如 SteJ 所说 - 这不适用于 Safari。

由于我们无法FileList直接创建 - 我将用户DataTransfer设置为“hack”

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

或者

file_input_node.files=new DataTransfer().files