Menu
I have seen some demos where mozilla guys dropped a photo into a dropbox and then edited it locally in the browser. But now i cannot find out the demo and i need to load images to my html, then edit them with canvas element, then upload them to server. I think there is a way of doing this but i cannot find any good explanation. Basically i need to take a picture on my clients computer and insert it into a canvas element without touching the server. Any help will be appreciated.
975
When present, it specifies that the user is allowed to enter more than one value in the <input> element. Note: The multiple attribute works with the following input types: email, and file. Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting.
The only way to set the value of a file input is by the user to select a file. This is done for security reasons. Otherwise you would be able to create a JavaScript that automatically uploads a specific file from the client's computer.
It's the new File API from the W3C (which Mozilla had a lot to do with). I've done a couple of File API examples in answers to other StackOverflow questions that may be useful:
That second one, in particular, shows loading a local image file into an img element, which you could readily use with a canvas.
If you want the drag-and-drop aspect, you might also check out the HTML5 Drag and Drop stuff; related article: Google Turns to HTML5 for Gmail’s New Drag-and-Drop Attachments.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
