问题
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 upload file)
回答1:
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.
回答2:
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
回答3:
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.
来源：https://stackoverflow.com/questions/6056638/set-input-file-element-with-file-using-html5-file-api