preview image before upload

1<input type="file" accept="image/*" onchange="loadFile(event)">
2<img id="output"/>
3<script>
4  var loadFile = function(event) {
5    var output = document.getElementById('output');
6    output.src = URL.createObjectURL(event.target.files[0]);
7    output.onload = function() {
8      URL.revokeObjectURL(output.src) // free memory
9    }
10  };
11</script>

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2<form runat="server">
3  <input type='file' id="imgInp" />
4  <img id="blah" src="#" alt="your image" />
5</form>
6
7<script>
8function readURL(input) {
9  if (input.files && input.files[0]) {
10    var reader = new FileReader();
11    
12    reader.onload = function(e) {
13      $('#blah').attr('src', e.target.result);
14    }
15    
16    reader.readAsDataURL(input.files[0]); // convert to base64 string
17  }
18}
19
20$("#imgInp").change(function() {
21  readURL(this);
22});
23</script>

1function display(input) {
2   if (input.files && input.files[0]) {
3      var reader = new FileReader();
4      reader.onload = function(event) {
5         $('#myid').attr('src', event.target.result);
6      }
7      reader.readAsDataURL(input.files[0]);
8   }
9}
10
11$("#demo").change(function() {
12   display(this);
13});