我正在尝试创建一个控件，您可以在其中选择要在表单中提交的文件并将文件放入其中以执行相同的操作。我有这样的东西，如果它是图像，它还会显示文件的预览：
<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无需额外的库。
虽然dropzone.js可以使用，但它不符合我的要求，并且需要大量的时间来定制其外观。而且，dropzone.js我的 ASP.NET 应用程序无法满足某些配置要求。
有一个类似的问题，但没有正确的答案：
如何在 HTML 表单中将文件对象设置到输入文件中？
也不相似于拖放图像输入文件并在上传前预览因为我已经实现了拖放和预览操作。我的问题特定于将文件放入父容器时输入空文件的问题。
免责声明：截至 2017 年 12 月正确且仅适用于现代浏览器。
*if you have a dataTransfer or FileList object
之前，以编程方式更改文件input[type=file]由于遗留安全漏洞，该字段已被禁用，这些漏洞已在现代浏览器上修复。
最后一个主要浏览器（Firefox）最近使我们能够为输入文件字段设置文件。根据由 W3C 进行的测试，看来你已经可以在 Google Chrome 上做到这一点了！
相关截图及文字引用自MDN：
You can set以及得到的值
HTMLInputElement.files在所有现代浏览器中。
源和浏览器兼容性，请参见MDN
火狐错误修复讨论线程有这个您可以测试演示出来了，这是源如果你想编辑它。为了将来参考，以防此链接失效，我还将其作为可运行的代码片段包含在下面：
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>重要的提示：
仅当您有现有的
FileListORdataTransfer您可以将其设置为输入文件元素的对象（因为 setter 方法不接受纯文本字符串）。欲了解更多信息，请参阅 Kaiido 的回答：如何在 FileList 对象中设置 File 对象和 length 属性，其中文件也反映在 FormData 对象中？
document.querySelector('.preview-image-instruction')
.addEventListener('drop', (ev) => {
ev.preventDefault();
document.querySelector('.image-url').files = ev.dataTransfer.files;
});