javascript - Is it possible to replace an image with another one selected by the user on the fly via jQuery alone? -

i'm having user select image , want change 1 shown on fly without having rely on server-side scripts php?

basically, have html has following:

<input type="file" id="file" name="file" /> <img id="imagedisplay" src="http://path/to/some/image.jpg" /> 

then on jquery side have following:

$('#file').change(function(e){     alert($(this).val()); }); 

i hoping replace imagedisplay's src 1 user selects referenced locally system $(this).val() displays file name won't able reference source.

you can use filereader api.

the filereader object lets web applications asynchronously read contents of files (or raw data buffers) stored on user's computer.

its method filereader.readasdataurl()

the readasdataurl method used read contents of specified blob or file.

note: works in modern browsers

$(document).ready(function() {      $('#file').change(function(e) {        var reader = new filereader();      reader.onload = function(e) {        $('#imagedisplay').attr('src', e.target.result);      }      reader.readasdataurl(this.files[0]);      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="file" id="file" name="file" />  <img id="imagedisplay" src="" />