使用HTML5设置包含文件的输入文件元素文件API

我正在使用输入文件元素将文件上载到我的JSP页面中。用户可以通过点击一个按钮来上传文件，该按钮通过浏览器的浏览按钮打开表格使用HTML5设置包含文件的输入文件元素文件API

现在，我想通过使用HTML5的拖放功能（如所述@html5 rocks page）上传文件。我能够使用File API提取文件名。有没有办法使用File API加载带有删除文件的输入文件元素？（以便我可以使用相同的行为来上传文件）

来源

2011-05-19 user760755

无法直接在JS中设置<input type=file>的值。该动作需要用户干预（并点击文件选择器）。但是，您可以使用 xhr.send(FormData)或xhr.send(File)来发送文件。看到这里我的回应：

HTML5 File API readAsBinaryString reads files as much larger, different than files on disk

在你滴处理，只是从PAS evt.dataTransfer.files到uploadFiles()助手获得FileList。

来源

2011-05-26 17:50:15 ebidel

这是处理拖放上传的最佳方式，无一例外。我根据ebidel的代码制作了一个小提琴，以展示它的行动。 http://jsfiddle.net/chad/Qrfb7/ – 2013-01-12 02:15:02

确实不可能处理任何与javascript相关的客户端。你可以但是use the file api to convert the image to base64。然后，您可以通过表单和隐藏的输入值（或使用javascript创建的值）将此值发送到服务器，使用php或其他您使用的服务器端语言对其进行解码，并将其保存为图像文件。

来源

2011-12-27 12:47:03 dreagan

错误的链接？没有HDMI问题在这里... – 2013-06-10 20:12:02

我能够使用dataTransfer对象的files属性设置input元素的“files”属性。

document.getElementById（“insert input file id”）。files = evt.dataTransfer.files;

我只是尝试使用getelement.value和它的错误。使用文件列表设置文件属性。

快乐编程！

Kremnari

来源

2014-06-18 19:02:04 Kremnari

我喜欢这个解决方案。它在IE 11或Firefox中不起作用（input.files是只读属性）。 – Dave 2015-05-11 17:28:11

是否在发布表单时实际提交文件？看起来并不适合我（Chrome v43） – Anentropic 2015-05-24 22:29:08

使用HTML5设置包含文件的输入文件元素文件API

回答

相关问题