How to Show Image into Div After browse Image or select image from local storage using file control For Select Image from file control
And show into div of html file with postback on server or with out sending request to server that is posible using some code of java script
step 1).First Create Html File Like this :- In html jus just write code of some line
<!DOCTYPE html>
<html>
<head>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
rel="stylesheet"
type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script
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]-->
</head>
<body>
<input type='file' onchange="ReadImage(this);" />
<img id="DigitalsupportImage" src="#" alt="Image Alternative Text" />
</body>
<script src='~/myscript.js' type="text/javascript"></script>
</html>
2). Create Javascript code file : create new Javascript and write this code Here we are create a function ReadImage that triggered when click on file control and it get image and its path
Then set Image source into Image file Name Is "DigitalsupportImage" then set path of javascript file into html file
//myscript.js
function ReadImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#DigitalsupportImage')
.attr('src', e.target.result)
.width(160)
.height(210);
};
reader.readAsDataURL(input.files[0]);
}
}
No comments:
Post a Comment