相关疑难解决方法(0)

注意:

下面的答案和评论反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript和dataTransfer或FileList对象实际动态/编程地设置文件输入元素的值.

有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？

我该如何设置它的值？

<input type="file" />

有没有办法设置文件input(<input type="file" />)的值,还是所有被阻止的安全性？我正在尝试使用谷歌齿轮的openFiles来制作一个简单的多重上传器.

注意:

下面的答案反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript动态/编程地设置文件输入元素的值.

有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？

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

<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更改输入文件的值.但是,我知道默认输入文件支持droppable,并且有一些网站让我们通过将它们放在表单中来选择文件,所以我的猜测是有一种方法可以做到这一点.

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

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

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

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

可以将元素的.files属性设置为例如来自不同的元素属性或属性.请参阅Make .files settable#2866,将文件上传到HTML表单并提交之间会发生什么？.<input type="file">FileList<input type="file">.filesDataTransfer.files

FileList对象有一个Symbol.iterator属性,我们可以使用它来设置一个File可迭代的对象,但是.files .length仍然设置为0并传递一个<form>有<input type="file">用于.files使用上述方法设置的集合,产生一个设置为的File对象..size0

如何设置Fileat FileList和set设置.length的FileList文件数,文件在FormData()object 设置的位置？

const input = document.createElement("input");

const form = document.createElement("form");

const [...data] = [
  new File(["a"], "a.txt")
, new File(["b"], "b.txt")
];

input.type = "file";

input.name = "files";

input.multiple = true;
// …

我找到了一些示例,解释了如何使input type = file不可编辑.喜欢<input type="file" onkeydown="blur()" />

但我在Visual Studio中进行了测试应用程序,并<input type="file" />在默认情况下发现它不可编辑.

如何使其可编辑？

谢谢

我有一个表单，允许用户将多个图像上传到服务器。该表单还允许用户根据 qs 参数编辑表单。作为附加信息，我将 redux-saga 与 React 结合使用，只是为了提供更多背景知识。

我能够上传图像并允许用户在做出选择之后和上传之前预览图像。但是，在查看文档后，我没有看到当用户编辑其他表单项时填充 React-dropzone 字段的方法。我看到了一种在 onDrop 上进行预览的方法，但不能使用来自服务器的数据。我还在 Stackoverflow 上找到了这篇文章，因为我不确定它是否可以应用于 redux-saga 场景中的案例：How to add the URL of an image already uploaded, to Dropzone? 。

这可以做到吗？如果可以的话如何实现？