drag & drop file upload question

drag & drop file upload question

Hi,

The following jQuery drag & drop demo is interesting.
http://smoothprogramming.com/javascript/demo-file-upload-using-drag-drop/

In the meantime, it's only half of a real function, that is, we need to upload the dropped file onto the server as well.

I've looked at some samples on form data passing with with $.post() function, however, I'm stumbled with two issues.
(1) for regular form data, it can be handled like $('#formID').serialize();
but in this case, the form data is a file, which can be a PDF, a Word doc or Excel or image or other types of file.
(2) how to map the the DIV with ID of "dropFiles" to the FORM element of type "file"?
(3) at form post, the state should be the form processing outcome.


// create form and file element
var fm = document.createElement('form');
fm.id = 'myfrm';
fm.enctype = 'multipart/form-data';
fm.method = 'post';
var el = document.createElement('input');
el.type = 'file';
el.name = 'myfile';
// following syntax is incorrect
el.value = document.getElementById('dropFiles').innerHTML;
// send form
$.post('processFileUpload.cfm?data=',$('#myfrm').serialize()); // to upload file to server


Thanks.