Html:
<input type= "file" id= "pic" name= "pic" onchange= "setpreimg ();" Style= "Position:absolute; top:0px; left:0px; bottom:0px; width:100%; height:100%; z-index:999; opacity:0; " />
Js:
Using the FileReader property of HTML5
if (window. FileReader) {
var ofreader = new window. FileReader (),
Rfilter =/^ (?: Image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg |image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\ -anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\ /x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump) $/i;
Ofreader.onload = function (e) {
$ ("#imgfpic1"). attr (' src ', e.target.result);
};
var afiles = document.getElementById ("pic"). files;
if (afiles.length = = = 0) {return;}
if (!rfilter.test (Afiles[0].type)) {alert ("You must select a valid Image file!"); return;}
Ofreader.readasdataurl (Afiles[0]);
}
IMG Tags show Local files