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

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

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

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

这可能吗？

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

共有3种清除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);
        }
    }
}

tl; dr：对于现代浏览器，只需使用

input.value = '';

旧答案：

怎么样：

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

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

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

编辑： 对于webkit，Opera和firefox，这是可行的，但是：

input.value = '';

（请通过此建议检查以上答案）

我将看看是否可以找到一种不需要GC的更简洁的跨浏览器方式。

编辑2：

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

适用于大多数浏览器。不适用于IE <9。
在Firefox 20，Chrome 24，Opera 12，IE7，IE8，IE9和IE10上进行了测试。

将该值设置为''并非在所有浏览器中都有效。

而是尝试将值设置为null如下所示：

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

编辑：我有非常有效的安全原因，不允许JS设置文件输入，但是提供一种简单的机制来清除已经选择的输出似乎是合理的。我尝试使用空字符串，但是它不适用于所有浏览器，也不能用于所有尝试使用NULL的浏览器（Opera，Chrome，FF，IE11 +和Safari）。

编辑：请注意，设置为NULL在所有浏览器上均有效，而设置为空字符串则无效。

不幸的是，以上答案似乎都没有涵盖所有基础-至少在我使用香草javascript的测试中没有。

• .value = null似乎可以在FireFox，Chome，Opera和IE11上运行（但不能在 IE8 / 9/10上运行）

• .cloneNode（和.clone()jQuery中）在FireFox上似乎复制.value了副本，因此使克隆毫无意义。

因此，这是我编写的可在FireFox（27和28），Chrome（33），IE（8、9、10、11），Opera（17）上运行的普通javascript函数……这些是当前可用的唯一浏览器给我测试。

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

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

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

解

以下代码适用于jQuery。它适用于所有浏览器，并允许保留事件和自定义属性。

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

演示

有关代码和演示，请参见此jsFiddle。

链接

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

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

您需要用新的文件输入替换它。这是使用jQuery的方法：

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

并在需要清除输入字段时使用此行（例如，在某些情况下）：

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

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

编辑：
这在IE和Opera中不起作用，但似乎对Firefox，safari和chrome有效。

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

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>

这实际上很容易。

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

我一直在寻找清除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>

出于以下原因，以上答案提供了一些笨拙的解决方案：

1. 我不喜欢到wrap了input第一，然后得到的HTML，这是非常复杂的和肮脏。

2. 跨浏览器JS很方便，在这种情况下，似乎有太多未知数，无法可靠地使用type切换（同样有点脏）并设置value为''

因此，我为您提供了基于jQuery的解决方案：

$('#myinput').replaceWith($('#myinput').clone())

它按照它说的去做，用自身的克隆替换输入。克隆将没有选择文件。

优点：

1. 简单易懂的代码
2. 没有笨拙的包装或类型切换
3. 跨浏览器兼容性（如果我在这里错了，请纠正我）

结果：快乐的程序员

帮助我的是，我尝试使用循环来获取并上载最后选择的文件，而不是清除队列，然后它起作用了。这是代码。

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

希望这会有所帮助。

我尝试了大多数解决方案，但似乎没有人工作。但是我在下面找到了它。

形式的结构是：form=> label，input和submit button。选择文件后，通过在JavaScript中手动执行操作，文件名将由标签显示。

所以我的策略是：最初button禁用提交，选择文件后，disabled将删除Submit按钮属性，以便我可以提交文件。提交后，我清除了label，这看起来就像我清除了文件，input但实际上没有。然后，我将再次禁用提交按钮，以防止提交表单。

通过设置是否提交button disable，我会阻止文件多次提交，除非我选择另一个文件。

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

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

这将返回一个空数组，并且可以在所有浏览器上使用

我更改为使用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");
}