Set input file element with file using HTML5 File API

I am using an input file element to upload file in my JSP page. The user can upload the file by clicking on a button which opens a form with browser's browse button

Now, I want to upload the file by using drag drop feature of HTML5 (as described @ html5 rocks page). I am able to extract the file name using File API. Is there a way to load the input file element with the dropped file using File API? (So that I may use the same behavior to upl开发者_StackOverflow中文版oad file)

There's no way to set the value of a <input type=file> directly in JS. That action requires user intervention (and a click on a file picker). However, you can use xhr.send(FormData) or xhr.send(File) to send the files. See my response here:

HTML5 File API readAsBinaryString reads files as much larger, different than files on disk

In your drop handler, just pas the FileList obtained from evt.dataTransfer.files to that uploadFiles() helper.

I was able to set the "files" attribute of the input element with the files property of the dataTransfer object.

document.getElementById("insert input file id").files = evt.dataTransfer.files;

I just tried using getelement.value and it errors. Set the files property with the files list.

Happy Programming!

Kremnari

it is indeed impossible to handle anything client related in javascript. You could however use the file api to convert the image to base64. You can then send this value to the server through a form and a hidden input value (or one created with javascript), decode it in php or whatever serverside language you're using, and save it as an image file.