Drag and drop files to be uploaded when the form is submitted

我与影子孤独终老i 提交于 2019-12-13 02:40:59

问题


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.

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.

Thank you!


回答1:


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.

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.

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.

Cheers, Apoc



来源:https://stackoverflow.com/questions/12165616/drag-and-drop-files-to-be-uploaded-when-the-form-is-submitted

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!