如何重置输入文件？答案

【问题标题】：How to reset iput file?如何重置输入文件？
【发布时间】：2019-09-28 10:55:54
【问题描述】：

我有一个大表格，我需要重置功能。我写了一些代码，效果很好，但我只有 input[type=file] 有问题。我读到我必须从 DOM 中删除它并用它的副本替换它，但是，我不能再发送这个文件了！我正在通过 ajax 发送表单数据，并且需要文件字段。所以，在重置表单之前，所有发送都很好，但是在重置服务器响应之后我没有发送文件._。我很确定 input[type=file] 有问题，因为在我添加这个功能之前，我的重置函数工作正常。我试过这段代码：var imguploadcont = form_tool.find(".imguploadcont"); imguploadcont.html('<input id="imgInp_{{key}}" type="file" name="userfile" class="custom-file-input" id="customFile"><label class="custom-file-label" for="customFile">'+imguploadcont.attr('text')+'</label>');

还有这个：var fileinput = form_tool.find("input[type=file]"); fileinput.val(''); form_tool.find('.custom-file-label').text('Choose image');

怎么了？

【问题讨论】：

没有必要为了重置值而删除并重新创建它。
@YakutD 问题主要出在您的代码中。您已经为 input[type=file] 使用了两次 id 属性此外，您需要正确绑定 AJAX 提交代码。 $("#form_id).on("submit",function(){ .... 你的 ajax 代码... });
@Alpha，谢谢，我已修复，但在重置字段后仍然无法发送文件。_.
你在使用 jQuery AJAX 的序列化选项吗？您是否看到参数 userfile 与值一起发送？如果您的 AJAX 提交位于 $(document).ready(function(){ . .. });将其放入 $(function() { .. 将提交代码放在这里，因为您的表单内容已动态更改.. });

标签： javascript jquery ajax forms

【解决方案1】：

为了一般理解，如果您的正文内容已通过 AJAX 或任何其他方法动态更改，特别是您正在使用元素重新提交相同的内容。您需要按如下方式绑定函数的提交 -

    $(function()
    {

    .. Place your code here .. This is irrespective of document contents loaded or modified just before initially or re-submit based on dynamically loaded elements.

$("#form_id").on("submit",function(e)
{
e.preventDefault(); // Prevents default submission of the form

$.ajax({ // Your AJAX Code // });

});    

 });

以下方法将不起作用，因为您的 DOM 内容已更改并且它只考虑加载的值（而不是动态修改的元素）

$(document).ready(function()
{
.. Your functions ...

});

【讨论】：

@YakutD 你应该投票并选择我的回复作为答案。

【解决方案2】：

您可以使用此行清除文件值

$('.custom-file-input').val(null);

【讨论】：