Question

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

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

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

这可能吗？

Answer 1

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

将value属性设置为空或null。

适用于IE11 +和其他现代浏览器。
创建一个新的文件输入元素并替换旧文件。

缺点是您将丢失事件侦听器和expando属性。
通过form.reset（）方法重置所有者表单。

为避免影响同一所有者表单中的其他输入元素，我们可以创建一个新的空表单，并将文件输入元素附加到此新表单并重置它。这种方式适用于所有浏览器。

演示：

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.type = "text";
input.type = "file";

我仍然必须明白为什么不与 webkit 一起使用。

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

修改对于webkit，Opera和firefox都可以，但是：

input.value = '';

（使用此提案检查上述答案）

我会看到我是否可以在不需要GC的情况下找到一种更好的清洁方式来完成这种跨浏览器。

<强> EDIT2：

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

适用于大多数浏览器。不适用于IE＆lt; 9，就是这样在firefox 20，chrome 24，opera 12，IE7，IE8，IE9和IE10上测试过。

Answer 3

不幸的是，上述答案似乎都没有覆盖所有基础 - 至少不是我使用vanilla javascript进行测试。

.value = null似乎适用于FireFox，Chome，Opera和IE11（但不 IE8 / 9/10）
.cloneNode（以及jQuery中的.clone()）似乎将.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 4

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

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

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

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

编辑：请注意，设置为NULL适用于所有浏览器，而设置为空字符串则不适用。

Answer 5

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

Answer 6

你需要用新文件输入替换它。以下是jQuery的完成方式：

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

并在需要清除输入字段时使用此行（例如某些事件）：

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

Answer 7

解

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

SyncLock tw

样本

请参阅this jsFiddle以获取代码和演示。

LINKS

Answer 8

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

修改
这个在IE和Opera中不起作用，但似乎适用于firefox，safari和chrome。

Answer 9

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 10

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

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 11

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

FormMethod.Post

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

Answer 12

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

我不喜欢首先wrap input然后获取html，它非常复杂和肮脏。
跨浏览器JS很方便，在这种情况下似乎有太多未知数可靠地使用type切换（这又有点脏）并将value设置为''

所以我为您提供基于jQuery的解决方案：

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

它完成它所说的，它用自己的克隆替换输入。克隆将不会选择文件。

优点：

简单易懂的代码
没有笨拙的包裹或类型切换
跨浏览器兼容性（如果我错了，请纠正我）

结果：快乐的程序员

Answer 13

我一直在寻找简单而干净的方式来清除HTML文件输入，上面的答案很棒，但是没有一个真正回答我正在寻找的东西，直到我在网上看到了简单优雅的方式做到这一点：

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

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

所有功劳归于Chris Coyier。

// 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>

Answer 14

试试这个简单的方法就行了

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

这将重置输入

Answer 15

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

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

由于我们无法直接创建 FileList - 我将 DataTransfer 用作“hack”

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

或

file_input_node.files=new DataTransfer().files

Answer 16

这对我有用。 const clear =（事件）=> {event.target.value = [];} clear（“ input_id”）;

Answer 17

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

Answer 18

那实际上很容易。

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

Answer 19

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

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

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

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

Answer 20

帮助我的是，我尝试使用循环获取并上传最后选择的文件，而不是清除队列，并且它有效。这是代码。

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);
}

希望这可能有所帮助。

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

20 个答案:

解

样本

LINKS