JavaScript implements client file selection file and img tag load client image to achieve image preview.
Test browsers: firefox6, firefox12, chrome 25.0.1364.172 m, IE6-IE10 are all compatible
safari5.0.4 does not support FileReader and file.files.item(0).getAsDataURL methods. There is no solution for the time being. You need to upload it to the server and return the temporary file name and load it with the img tag. I don’t know whether the subsequent safari version supports FileReader objects.
IE10 effect:
IE9 effects:
Implement source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="txt/html;charset=utf-8" /><title>javascript implements IE, firefox client image preview</title><script> //Use IE conditional annotation to determine whether IE6 is IE6. By judging that userAgent is not necessarily accurate if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.ie6= true<//script><![endif]-->'); // var ie6 = /msie 6/i.test(navigator.userAgent);// Not recommended, some systems' ie6 userAgent will be IE7 or IE8 function change(picId,fileId) { var pic = document.getElementById(picId); var file = document.getElementById(fileId); if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9, IE9 can also use filters to implement oFReader = new FileReader(); oFReader.readAsDataURL(file.files[0]); oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;}; } else if (document.all) {//IE8- file.select(); var reallocalpath = document.selection.createRange().text// Get the actual local file path under IE if (window.ie6) pic.src = reallocalpath; //IE6 browser sets img's src to the local path to directly display the picture else { //IE6 version of IE directly set img's src cannot display the local picture due to security issues, but it can be implemented through filters. IE10 browser does not support filters and needs to use FileReader to implement it. So please be careful to judge that FileReader first pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=/"" + reallocalpath + "/")"; pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAAAAAAAAAAAAAAAAAAAICRAEAOw==';//Set img's src to a transparent picture encoded by base64, and will it not display red xx } } else if (file.files) {//firefox6- if (file.files.item(0)) { url = file.files.item(0).getAsDataURL(); pic.src = url; } } }</script></head><body><form name="form1" enctype="multipart/form-data"><table><tr><td> Sketch 1: </td><td ><input type="file" name="file1" id="file1" onchange="change('pic1','file1')"></td><tr><td> Sketch 1: </td><td><img src="images/px.gif" id="pic1" ></td></tr><tr><td> Sketch 2: </td><td ><input type="file" name="file2" id="file2" onchange="change('pic2','file2')"></td><tr><td>Sketch View 2: </td><td><img src="images/px.gif" id="pic2" ></td></tr></table></form></body></html>