Function description
Local previews of images via JavaScript (no uploading to the server), compatible with all browsers (ie6&ie6+, Chrome, Firefox).
Implementation Essentials
For Chrome, Firefox, IE10 use FileReader.
For ie6~9, use filter filter:progid:DXImageTransform.Microsoft.AlphaImageLoader to implement.
<!DOCTYPE HTML> <HTML> <Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" /> <styletype= "Text/css">#preview,. IMG, img{width:200px;Height:200px; }#preview{Border:1px solid #000; } </style> </Head> <Body> <DivID= "Preview"></Div> <inputtype= "File"onchange= "Preview (this)" /> <Scripttype= "Text/javascript"> functionPreview (file) {varPrevdiv=document.getElementById ('Preview'); if(File.files&&file.files[0]) { varReader= NewFileReader (); Reader.onload= function(evt) {prevdiv.innerhtml= '' +Evt.target.result+ '"/>'; } reader.readasdataurl (file.files[0]); } Else{prevdiv.innerhtml= '<div class= "img" style= "Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=scale,src= \ '' +File.value+ '\ ' "></div>'; } } </Script> </Body> </HTML>
Pre-upload JavaScript images (compatible with all browsers)