1<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
2<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
3<p><img id="output" width="200" /></p>
4
5<script>
6var loadFile = function(event) {
7 var image = document.getElementById('output');
8 image.src = URL.createObjectURL(event.target.files[0]);
9};
10</script>
1$('document').ready(function () {
2 $("#imgload").change(function () {
3 if (this.files && this.files[0]) {
4 var reader = new FileReader();
5 reader.onload = function (e) {
6 $('#imgshow').attr('src', e.target.result);
7 }
8 reader.readAsDataURL(this.files[0]);
9 }
10 });
11});
12
13<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
14<input type="file" id="imgload" >
15<img src="#" id="imgshow" align="left">