Question

I’m currently following this example for HTML 5 drag and drop. I am hoping to use this to upload the dropped files to a remote FTP server with a php script. However, how do my php script access these dropped files ?

With a regular web form, I can use $_FILES.. But I don’t suppose I can use $_FILES for the dropped files..

On the example, the script calls handleFiles function after a drop event

function handleFiles(files) {
var file = files[0];
document.getElementById("droplabel").innerHTML = "Processing " + file.name;
var reader = new FileReader();
// init the reader event handlers
reader.onprogress = handleReaderProgress;
reader.onloadend = handleReaderLoadEnd;
// begin the read operation
reader.readAsDataURL(file);
}

I guessing that I can iterate each element of the array list, and send each element to my php script. As I’ve mentioned above, how can I send this element from the array list to the php script? JSON ? jQuery POST ?

I am aware that there are various jquery plugins available to achieve this, and I have downloaded a few of them… However I’m just curious to know if I can implement the same thing with this example.

Answer 1

I presume by upload you mean upload it in a ajax operation.
file refer to a File object, which is available for you after the user had drop the file. After that you have two options:

1. Read the file using FileReader, send the text in xhr as post data (not recommend as it only work with text)
2. Pass the object to FormData then pass the FormData object to xhr to send the file (Doesn’t work with Firefox <= 3.6 though)

Check Mozilla Developer Center document for the usage of these interfaces. I have working projects that use these objects, however there are too much bridging code to be a good walk-through demo. https://github.com/timdream/html5-file-upload