在提交表单时拖放要上传的文件 [英] Drag and drop files to be uploaded when the form is submitted

问题描述

一旦提交表单，我正在尝试实现拖放文件选择，以同步上传文件。我知道如何使用HTML和PHP进行常规文件上传。我想要能够处理PHP中的文件以及$ _FILES数组中的文件。

I'm trying to implement drag-and-drop file selection for uploading files synchronously once the form is submitted. I know how regular file uploading works with HTML and PHP. And I want to be able to process the files in PHP alongside the ones in the $_FILES array.

我已经做了一些研究，看几个插件，但几乎所有这些都会将文件上传到窗口中，或者不使用传统的html格式。

I've done some research and looked at several plugins but pretty much all of them either upload files once they're dropped into the window or don't use conventional html forms.

任何类型的帮助，如想法，代码段或插件将是赞赏。

Any kind of help like ideas, snippets or plugins would be appreciated.

谢谢！

推荐答案

出于安全考虑，通过JavaScript输入的文件的文件属性。请参阅此jsfiddle 。

It is impossible to set the files attribute of a file input via JavaScript for security reasons. See this jsfiddle.

所以，你无法通过拖放来选择文件输入文件，您必须通过直接选择文件输入，点击浏览文件按钮。

So, you cannot select files for a file input via drag and drop, you have to select the files via the file input directly, by clicking on the 'browse files' button.

什么您可以做的是为表单实现一个onUpload方法，当用户通过AJAX单击提交按钮时上传文件。然后，上传完成后，您提交表单与其他数据。

What you can do is to implement an onUpload method for the form, to upload the files when the user clicks the submit button, via AJAX. Then, when the uploads are completed, you submit the form with the other data.

请参阅这个小提琴，看看如何通过AJAX上传文件。该代码具有拖放处理功能，并将二进制文件转换为BASE64。您将需要通过发布数据来创建AJAX位。要检查文件是否完成，请创建一个使用 setInterval 调用的函数，以检查是否所有上传完成。

See this fiddle to see how to upload files via AJAX. The code has the drag and drop processing and converting binary files into BASE64. You will need to create the AJAX bit by posting the data. To check if the files are done, create a function to be called with setInterval, to check if all the uploads completed.

干杯，
Apoc

Cheers, Apoc

这篇关于在提交表单时拖放要上传的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！