How to Image Upload with preview image using javascript

image upload with preview image

File name : index.php

<html>
<head>
</head>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output" width="100" height="100"/>
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>

<br/><br/><br/><br/><br/><br/>

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="outputimage" width="200" height="200"/>
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('outputimage');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>

<br/><br/><br/>
<img id="blah" alt="your image" width="100" height="100" />

<input type="file" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

</body>
</html>

image upload with preview image using javascript

File name : index.php

<html>
<head>
<style type="text/css">
.thumb-image{
float:left;width:100px;
position:relative;
padding:5px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;"><input id="fileUpload" multiple="multiple" type="file"/>
<div id="image-holder"></div>
</div>

<script>
$(document).ready(function() {
$("#fileUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++)
{
var reader = new FileReader();
reader.onload = function(e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
});
</script>
</body>
</html>

Previous Next

Review & Rating

0.0 / 5

0 Review

5

(0)

4

(0)

3

(0)

2

(0)

1

(0)