Most Popular Tutorials
-
What is Javascript
-
BOM (Browser object model)
-
DOM (Document object model)
-
Variable
-
Variable is empty or Not
-
Javascript output
-
Function
-
Events
-
Array
-
Get text value
-
Get Form field value
-
Pattern validation
-
Form validation
-
Checkbox validation
-
Inner Html form validation
-
Form validation on php server
-
Window and window location
-
Get Text Value
-
get javascript value in php
-
Date Format
-
Get php variable in javascript
-
Redirect page in javascript
-
Auto Refresh page and DIV
-
Get text value from dropdown
-
Clear Browser History
-
Get Checkbox value
-
select (Dropdown)
-
PopUp Contact Form
-
sidebar contact form
-
Show modal on page load
-
Auto calculate price GST
-
print html and Div content
-
Calculate Discount prince
-
Checked single or all checkbox
-
Auto Fill form data on click checkbox
-
Show subcategory (Dependent Dropdown)
-
country, state, city (Dependent Dropdown)
-
Image upload with preview image
-
Filter table data
-
Character Limit Validation
-
uploading file size validation
-
Special Character validation
-
multiple file upload (Add more)
-
function call after page load
-
Disable Submit Button After Form Submission
-
disable browser back button
-
Remove selected item from second & third dropdown list
-
Interview Question
-
Active Tab Menu
-
String methods
Most Popular Tutorials :-
Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List
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>
<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>
<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
Trending Tutorials
Review & Rating
0.0 / 5
0 Review
5
(0)
4
(0)
3
(0)
2
(0)
1
(0)
Write Review Here
Most Popular Tutorials
-
Get Text Value
-
Interview Question
-
Form validation
-
multiple file upload (Add more)
-
Auto calculate price GST
-
Date Format
-
Auto Refresh page and DIV
-
Special Character validation
-
Auto Fill form data on click checkbox
-
Array
-
get javascript value in php
-
Remove selected item from second & third dropdown list
-
Active Tab Menu
-
Javascript output
-
Checked single or all checkbox
-
print html and Div content
-
country, state, city (Dependent Dropdown)
-
String methods
-
sidebar contact form
-
Events
Important Link
-
How to manage Session in php Tutorials.
More ....... -
upcomming codeigniter and angular js tutorials.
Click here to see More ...
