Question

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

<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不相似，因为我已经实现了拖放和预览操作。 我的问题是针对在父容器中删除文件时输入空文件的问题。

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

0 个答案: