image preview before upload using php
image preview before upload using PHP
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>