如何设置文件输入值时，删除页面上的文件？

我正在尝试创建一个控件，在这个控件中，您可以选择一个要在表单中提交的文件，并将一个文件放入其中以执行相同的操作。我有这样的东西，它也会显示一个预览的文件，如果它是一个图像:

<div class="preview-image-container">


<input type="file" name="File" id="File" accept="image/*"
class="image-url form-control" style="display:none;" />


<div class="preview-image-dummy"></div><img class="preview-image-url" />
<div class="preview-image-instruction">
<div class="preview-image-btn-browse btn btn-primary">Select file</div>
<p>or drop it here.</p>
</div>


</div>

这里有一个小提琴与 MCVE 。

用户删除 preview-image-container中的文件。文件不是用 AJAX 提交的，用户需要提交包含更多数据的表单。

出于安全原因，我们不允许使用 JavaScript 更改输入文件的值。然而，我知道默认的输入文件支持可删除，并且有很多网站允许我们通过删除表单中的文件来选择文件，所以我猜想有一种方法可以做到这一点。

正如您可以从 MCVE 中看到的，我只对使用没有附加库的 JQuery 或纯 JavaScript感兴趣。

虽然可以使用 降落区 Js，但是它不符合我的要求，而且需要花费大量的时间来定制它的外观。此外，降落区 Js有一些在我的 ASP.NET 应用程序中无法满足的配置要求。

有一个类似的问题，但没有一个正确的答案: < br > < a href = “ https://stackoverflow.com/q/21983389/584192”> 如何将文件对象设置为 HTML 格式的输入文件？

也不类似于 拖放图像输入文件和预览之前上传，因为我已经实现了拖放和预览动作

81622 次浏览
小开
最佳答案

免责声明: 正确截至2017年12月，只适用于现代浏览器。

是的，现在你可以了！

如果有 dataTransfer 或 FileList 对象，则为 *

之前 ，由于遗留的安全漏洞，以编程方式更改文件 input[type=file]字段被禁用，这些漏洞在现代浏览器上是固定的。

最后一个主流浏览器(Firefox) ，最近已经允许我们为输入文件字段设置文件。根据 由 W3C 完成的测试，似乎你已经可以在谷歌浏览器上做到这一点！

从 MDN 引用的相关截图和文本:

enter image description here

您可以在所有现代浏览器中获得 HTMLInputElement.files的值，也可以获得 准备好了的值。
源代码和浏览器兼容性，请参见 < a href = “ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file”rel = “ noReferrer”> MDN

Firefox 的 错误修正的讨论线程有这个 您可以测试演示，这是 源，如果你想编辑它。为了以后的参考，如果这个链接死亡，我还将包括它作为一个可运行的代码片段如下:

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');


target.addEventListener('dragover', (e) => {
e.preventDefault();
body.classList.add('dragging');
});


target.addEventListener('dragleave', () => {
body.classList.remove('dragging');
});


target.addEventListener('drop', (e) => {
e.preventDefault();
body.classList.remove('dragging');
  

fileInput.files = e.dataTransfer.files;
});
body {
font-family: Roboto, sans-serif;
}


body.dragging::before {
content: "Drop the file(s) anywhere on this page";
position: fixed;
left: 0; width: 100%;
top: 0; height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
background-color: rgba(255, 255, 0, .3);
pointer-events: none;
}


button, input {
font-family: inherit;
}


a {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">


<title>JS Bin</title>
</head>
<body>
  

<h1>Drag and drop files into file input</h1>
  

<p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
  

<p>
<input type="file">
</p>


</body>
</html>

重要提示:

只有当您有一个现有的 FileList或 dataTransfer对象可以设置为 input file 元素(因为 setter 方法不接受纯文本字符串)时，才能这样做。

有关更多信息，请参见 Kaiido 的答案: 如何在 FileList 对象中设置 File 对象和 length 属性，其中文件也反映在 FormData 对象中？

现在回答你最初的问题，应该很简单:

document.querySelector('.preview-image-instruction')
.addEventListener('drop', (ev) => {
ev.preventDefault();
document.querySelector('.image-url').files = ev.dataTransfer.files;
});

提交答案