HTML - Display image after selecting filename
HtmlFile UploadHtml Problem Overview
I have a form that allows me with
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">
to browse and select a file.
What I want to do is display that image immediately after the image has been selected. And this is before the "submit" button on the form has been pressed so the image almost certainly resides Client side. Can this be done?
Html Solutions
Solution 1 - Html
Here You Go:
HTML
<!DOCTYPE html>
<html>
<head>
<link
class="jsbin"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
rel="stylesheet"
type="text/css"
/>
<script
class="jsbin"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
></script>
<script
class="jsbin"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"
></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
</style>
</head>
<body>
<input type="file" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>
Script:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result).width(150).height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
Solution 2 - Html
You can achieve this with the following code:
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});
Solution 3 - Html
This can be done using HTML5, but will only work in browsers that support it. Here's an example.
Bear in mind you'll need an alternative method for browsers that don't support this. I've had a lot of success with this plugin, which takes a lot of the work out of your hands.