在页面上放置文件时如何设置文件输入值？ [复制]答案

【问题标题】：How to set file input value when dropping file on page? [duplicate]在页面上放置文件时如何设置文件输入值？ [复制]
【发布时间】：2018-05-10 22:41:31
【问题描述】：

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

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

Here's a fiddle with MCVE.

用户将文件放在preview-image-container 中。文件未使用 AJAX 提交，用户需要提交包含更多数据的表单。

出于安全原因，我们不允许使用 JavaScript 更改输入文件的值。但是，我知道默认输入文件支持 droppable，并且有很多网站可以让我们通过将文件拖放到表单中来选择文件，所以我猜是有办法做到这一点的。

从 MCVE 中可以看出，我只对使用 jQuery 或纯 JavaScript 不感兴趣。

虽然可以使用 dropzone.js，但它不符合我的要求，并且需要大量时间来自定义其外观。此外，dropzone.js 有一些在我的 ASP.NET 应用程序中无法满足的配置要求。

有一个类似的问题，但没有正确答案：
How to set file object into input file in the form in HTML?

也不类似于drag drop images input file and preview before upload，因为我已经实现了拖放和预览动作。 我的问题是针对将文件放入父容器时输入空文件的问题。

【问题讨论】：

快速搜索显示这已被多次询问，例如：stackoverflow.com/questions/25092981/…
@freedomn-m 这个问题专门针对在放置时显示预览，我已经在这样做了。但是，删除时我的输入为空。

标签： javascript jquery forms file events

【解决方案1】：

免责声明：截至 2017 年 12 月正确且仅适用于现代浏览器。

TL;DR：是的，现在你可以了！

^{*如果你有一个 dataTransfer 或 FileList 对象}

以前，以编程方式更改文件 input[type=file] 字段由于旧版安全漏洞而被禁用，这些漏洞已在现代浏览器上修复。

最后一个主要浏览器 (Firefox)，最近使我们能够为输入文件字段设置文件。根据W3C testing，看来你已经可以在谷歌浏览器上做到这一点了！

引用自MDN的相关截图和文字：

您可以在所有现代浏览器中设置以及获取HTMLInputElement.files 的值。
来源和浏览器兼容性，请参阅MDN

Firefox 的bugfix discussion 线程有这个demo you can test，这里是source if you want to edit it。以供将来参考，以防此链接失效，我还将其作为可运行的 sn-p 包含在下面：

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 对象，您可以将其设置为输入文件元素（因为 setter 方法不接受纯文本字符串）时，您才能执行此操作。

欲了解更多信息，请在此处查看 Kaiido 的回答：How to set File objects and length property at FileList object where the files are also reflected at FormData object?

现在回答你原来的问题，应该这么简单：

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

【讨论】：

你是救生员，非常感谢。它不适用于 IE 11.0.9600，我还没有在 Edge 上对此进行测试，但如果我找到该浏览器的解决方法，我会很乐意发布额外的答案。
是的，这改变了游戏规则，它也让我感到惊讶。似乎 Edge 也通过了 W3C 测试 - 请参阅更新的答案。
重要提示： 您只能将input.files 属性设置为其他 FileList 对象，并且由于我们无法创建或修改（清除除外）FileList 对象，这意味着我们仍然无法在此属性中附加任意文件，只能附加来自其他输入或来自 DataTransferEvent 的文件。见stackoverflow.com/questions/47119426/…
重要提示 #2 正如 SO 用户 guest271314 所发现的，实际上现在有一种方法可以通过 DataTransfer.DataTransfer 构造函数创建可写的 FileList（目前仅在铬合金）。我确实用更多信息更新了linked answer。
这真是很酷的东西。我在这里注意到的一件事是，当我们将这样的文件分配给输入文件元素时，它不会生成输入文件类型的 onchange 事件。有什么解决方法吗？