How to Show Image into image control After browse image or select image from local storage using file control

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

Thank You For Your Great Contribution

Featured Post

how to find n number of nodes have child or cildren

 how to find n number of nodes have child or cildren for that we use recursive function  const   data = {     'id' : '0' ,...

Popular Posts