Menu
I am trying to get my head around and using the selected image in a website.
Let's say I have a simple website that lets the user select an image from their system using:
<input type="file" id="userImage">
Then in the JavaScript I can do this to get the file:
var userImage = document.getElementById('#userImage').files[0];
Questions:
1) Can I now use userImage? Such as drawing it on a canvas, or do I need to uploaded it to the websites server first?
2) If I use the image, does the website have to upload it every-time I use it, or does it stay in memory?
3) How do I know when the image is ready to use? (for the same reasons all images should be preloaded at the start before drawn on canvas)
Thanks so much for your help :)
Follow-up
Thanks for your answers. So it looks like it is possible in html5 but not yet universally supported.
836
The input element, having the "file" value in its type attribute, represents a control to select a list of one or more files to be uploaded to the server. When the form is submitted, the selected files are uploaded to the server, along with their name and type.
<input type="reset"> <input type="search"> <input type="submit">
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.
A form in an HTML document (Web page) can contain an input element with type="file" . This may let the user include one or more files into the form submission.
Properties that apply only to elements of type file. A file input's value attribute contains a DOMString that represents the path to the selected file(s). If the user selected multiple files, the value represents the first file in the list of files they selected.
Definition and Usage. The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute.
The other files can be identified using the input's HTMLInputElement.files property. If multiple files are selected, the string represents the first selected file. JavaScript can access the other files through the input's files property. If no file is yet selected, the string is "" (empty).
In a form, the file value of the type attribute allows you to define an input element for file uploads. This displays a browse button, which the user can click on to select a file on their local computer. Once a file has been selected, the file name appears next to the button. Claire is seasoned technical writer, editor, and HTML enthusiast.
In HTML4 this would not be possible, but in HTML5 you should be able to access local files using the W3 File API. However, I'm not sure when (and how) it will be supported by the different browsers. In my local firefox 14.0.1, the following code works and yields the binary data of the selected file:
var reader = new FileReader()
reader.readAsDataURL(document.getElementById('userImage').files[0])
alert(reader.result)
The following page paints a local image onto a canvas:
<html>
<body>
<script type="text/javascript">
function doIt() {
var reader = new FileReader();
reader.onload = (function(e) {
var img = new Image();
img.src = e.target.result;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(img,10,10);
}
);
reader.readAsDataURL(document.getElementById('userImage').files[0]);
}
</script>
<input type="file" id="userImage" />
<button onclick="doIt()">Render Image</button><br/>
<canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/>
</body>
</html>
Maybe you should consider reading 2.
111
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
