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

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>

这里有一个关于MCVE的小提琴.

用户将该文件删除在preview-image-container..文件不是用Ajax提交的，用户需要提交包含更多数据的表单。

出于安全考虑，我们不允许用JavaScript更改输入文件的值。但是，我知道默认的输入文件支持可下垂，而且有很多网站允许我们通过删除文件的形式来选择文件，所以我的猜测是有一种方法可以做到这一点。

正如您从MCVE中看到的，我只对使用jQuery或纯JavaScript没有额外的库。

尽管Drozone.js可以使用，它不适合我的要求，它需要大量的时间来定制它的外观。此外，Drozone.js有某些在我的ASP.NET应用程序中无法满足的配置要求。

---

有一个类似的问题，但没有一个正确的答案：
如何将文件对象设置为HTML表单中的输入文件？

也不类似于拖放图像输入文件并在上传前预览因为我已经实现了拖放和预览操作。我的问题是在删除父容器中的文件时有一个空文件输入的问题。