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

Posted

技术标签:

【中文标题】如何使用 JavaScript 清除 HTML 文件输入？【英文标题】：How can I clear an HTML file input with JavaScript? 【发布时间】：2010-12-14 18:21:11 【问题描述】：

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

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

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

这可能吗？

【问题讨论】：

【参考方案1】： 
document.getElementById('your_input_id').value=''

编辑： 这个在 IE 和 opera 中不起作用，但似乎适用于 firefox、safari 和 chrome。

【讨论】：

这对我有用，虽然我总是问自己能坚持多久。 这行不通，只是在某些浏览器中，而且设置文件输入的值是安全漏洞......不是好的选择。【参考方案2】：

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

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

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

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

【讨论】：

替换原来的元素，这样更好看：***.com/questions/1043957/…【参考方案3】：

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 在 Firefox 20、chrome 24、opera 12、IE7、IE8、IE9 和 IE10 上测试。

【讨论】：

【参考方案4】：

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

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

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

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

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

【讨论】：

很遗憾，我在all browsers 中没有看到这个...它在 IE8、IE9 或 IE10 中不起作用（但在 IE11 中起作用）。 好吧。我没有测试旧版本的 IE 浏览器。对不起。【参考方案5】：

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

    我不喜欢先wrap input 然后获取 html，它非常复杂且肮脏。

    1234563 /p>

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

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

它按照它所说的做，它用自己的克隆替换输入。克隆不会选择文件。

优点：

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

结果： 快乐的程序员

【讨论】：

Cross browser compatibility... 我的测试表明，FireFox 将 .value 复制为 .clone() 的一部分，因此使其无用 @freefaller 为什么不在调用replaceWith 之前更改值？我自己使用clone()，它在firefox中运行良好（我不知道一年后你是否仍然如此=）） @Abdo - 如果您查看my answer，您会发现我这样做了 问题不在于jQuery；它在询问javascript。【参考方案6】：

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

.value = null 似乎适用于 FireFox、Chome、Opera 和 IE11（但不 IE8/9/10）

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

所以这是我编写的适用于 FireFox（27 和 28）、Chrome（33）、IE（8、9、10、11）、Opera（17）的 vanilla 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"));

【讨论】：

这就是答案。这个问题有这么多答案的问题之一 - 不仅在这个页面上，而且在其他论坛上搜索，也就是你可以清除“选择 3 个文件”文本，但它实际上并没有清除 http 文件队列。然后发生的情况是，下次您尝试上传时，您只能选择一个文件，更糟糕的是，它会保存到上一个文件夹中。此答案将清除两者，您可以像上传第一组文件一样轻松地继续上传下一组文件。 不应该将if 语句放在catch 块内吗？ @Fahmi - 不，不应该 哦，我以为 IE8/9/10 在尝试将值设置为 null 时会抛出异常。介意解释一下将ctrl.value = null; 放在try...catch 块中的意义何在？抱歉这个新问题。 ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl); - 实际上我们在什么时候清除了值，因为cloneNode 也复制了它？【参考方案7】：

使用 javascript 清除文件输入有 3 种方法：

    将 value 属性设置为空或 null。

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

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

    缺点是您将丢失事件侦听器和扩展属性。

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

【讨论】：

我们以后不应该也删除创建的表单吗？ 不，你不需要。表单元素尚未附加到页面文档树。 提醒一句，如果您想保留以编程方式添加到元素的事件和其他属性，使用方法 2. 或 3. 可能会对您产生影响。就我而言，我向表单元素添加了一个 onclick 事件，该元素在表单重置后消失了。在这种情况下，方法 1. 更好。 （这在 2. 中注明，但也可能在 3. 中发生。）【参考方案8】：

解决方案

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

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

演示

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

链接

Clearing <input type='file' /> using jQuery

How to reset file input with JavaScript

【讨论】：

【参考方案9】：

我一直在寻找简单而干净的方法来清除 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>

【讨论】：

.. 对您来说，这有助于我检查和显示潜在文件上传中的错误。这会在出错时重置，并让用户重新上传相同的文件，以防有人正在寻找类似的东西。【参考方案10】：

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

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

希望这可能会有所帮助。

【讨论】：

【参考方案11】：

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

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>

【讨论】：

【参考方案12】：

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

表单的结构是：form => label、input 和submit button。在我们选择一个文件后，文件名将在 JavaScript 中手动显示在标签上。

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

通过设置提交buttondisable 与否，我会多次停止提交文件，除非我选择另一个文件。

【讨论】：

【参考方案13】：

其实很简单。

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

【讨论】：

【参考方案14】：

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

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

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

【讨论】：

【参考方案15】：

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

【讨论】：

【参考方案16】：

input.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);

【讨论】：

不是只读文件类型 - 所以 file.value=null 不起作用。【参考方案17】：

这对我有用。

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

【讨论】：

Uncaught SyntaxError: Unexpected identifier【参考方案18】：

试试这个简单的，它的工作原理

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

这将重置输入

【讨论】：

【参考方案19】：

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

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

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

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

或

file_input_node.files=new DataTransfer().files

【讨论】：

这目前不适用于 Safari； Safari 不允许您创建 DataTransfer 的新实例。 @SteJ: :( - 由于 Apple 政治，我没有 Safari 可供测试 :( - THX，我将其写为编辑。

以上是关于如何使用 JavaScript 清除 HTML 文件输入？的主要内容，如果未能解决你的问题，请参考以下文章

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

当你点击它时，文本会被清除

HTML / Javascript：如何提交输入并使用提交/添加更多按钮填充文本区域

如何清除焦点上的文本区域？

如何在点击时清除文本区域？

如何使用 JavaScript 清除字符串中的标签