JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<input type="file">
<div id="preview"></div>
</form>
CSS
#preview img{width:100px;}
JavaScript
$('form input[type=file]').change(function() {
var src;
if ('files' in this) { // File API supported (webkit/FF)
var obj = this.files[0];
src = window.URL ?
window.URL.createObjectURL(obj) :
window.webkitURL.createObjectURL(obj);
} else {
if (/fake/.test(this.value)) {
// fallback to whatever (IE8, IE9)
} else {
src = this.value; // exploits the IE security hole
}
}
$('#preview').empty().append($('<img>').attr('src',src)); // the local image!
});