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

Question

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

Tri*_*tan 52 javascript forms jquery events file

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

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

Run Code Online (Sandbox Code Playgroud)

这是MCVE的小提琴.

用户删除文件preview-image-container.该文件未随AJAX提交,用户需要提交包含更多数据的表单.

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

正如您从MCVE中看到的,我只对使用jQuery或纯JavaScript而不使用其他库感兴趣.

虽然可以使用dropzone.js,但它不符合我的要求,需要花费大量的时间来定制它的外观.此外,dropzone.js具有某些在我的ASP.NET应用程序中无法满足的配置要求.

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

也不像上传拖放图像输入文件和预览,因为我已经实现了拖放和预览操作.我的问题是特定于在父容器中删除文件时输入空文件的问题.

Answer 1

Sam*_*iew 68

免责声明:截至2017年12月正确,仅适用于现代浏览器.

TL; DR:是的,现在你可以!

^{*如果您有dataTransfer或FileList对象}

以前,input[type=file]由于旧的安全漏洞(在现代浏览器上已修复),因此以编程方式更改文件字段已被禁用.

最近的主流浏览器(Firefox)最近使我们能够为输入文件字段设置文件.根据W3C测试,您似乎已经可以在Google Chrome上执行此操作了!

MDN引用的相关屏幕截图和文字:

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

Firefox错误修正讨论线程有这个演示,您可以测试它,如果您想编辑它,这里是源.如果此链接死亡以供将来参考,我还将其作为下面的runnable片段包含在内:

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;
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

重要的提示:

如果您有一个可以设置为输入文件元素的现有FileListOR dataTransfer对象(因为setter方法不接受纯文本字符串),则只能执行此操作.

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

现在回答你原来的问题,它应该像这样简单:

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

Run Code Online (Sandbox Code Playgroud)

**重要说明:**您只能将`input.files`属性设置为其他FileList对象,因为我们无法创建或修改(清除除外)FileList对象,这意味着我们仍然无法在此附加任意文件属性,仅来自其他输入或来自DataTransferEvent的属性.请参阅/sf/ask/3298359851/#47172409 (10认同)
这真的很酷。我注意到的一件事是，当我们将这样的文件分配给输入文件元素时，它不会生成输入文件类型的 onchange 事件。有什么解决方法吗？ (3认同)
**重要说明#2**由SO用户[guest271314](/sf/users/196109161/)发现,实际上现在有一种通过`DataTransfer.DataTransfer创建可写FileList的方法.构造函数(目前仅在chrome中提供).我确实更新了[链接的答案](/sf/ask/3298359851/#47172409)有更多信息. (2认同)

归档时间：	8 年，2 月前
查看次数：	37995 次
最近记录：	7 年，10 月前