提交表单后拖放要上传的文件

Question

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!

Answer 1

See below URL i think it is very help full to you.

HTML5 File Uploads with jQuery

http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

jQuery File Upload Plugin With Drag 'n' Drop Support

http://www.webresourcesdepot.com/jquery-file-upload-plugin-with-drag-n-drop-support/

Answer 2

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