When the user selects a picture, an onChange event is triggered on the file input field and that we can use JavaScript’s readURL() class to onchange event to display the image for preview. When the user choose the file, the input form is going to be submitted to an equivalent page. So on its same form.
Just modified your own code after copy below code
<style type="text/css">
.thumb
{
margin: 10px 5px 0 0;
width: 100px;
}
#blah
{
width: 120px;
}
</style>
</head>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<body>
<form id="form1" action="server.php" enctype="multipart/form-data">
<input type='file' name="file" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
<input type="submit" name="sub" value="submit">
</form>
</body>
Just use below code and modified according to your need. Note: this is very useful…
View Comments
Awesome post! Keep up the great work! :)
Thanks
Hiya, I’m really glad I’ve found this info. Nowadays bloggers publish just about gossip and net stuff and this is actually frustrating. A good website with interesting content, this is what I need. Thanks for making this site, and I will be visiting again. Do you do newsletters by email?
Thanks for visit.
I really appreciate this post. I’ve been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thank you again!
Excellent post! We are linking to this particularly great article on our website.
Thanks Stephen