I\'m having the user select an image and I want to change the one shown on the fly without having to rely on server-side scripts like PHP?
Basically, I have an HTML
You can use FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
Its method FileReader.readAsDataURL()
The
readAsDataURL
method is used to read the contents of the specified Blob or File.
Note: It 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="" />