页面部分:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.     </head> 
  6.  
  7.     <body> 
  8.         <div> 
  9.             <input type="file" name="upfile" id="upfile"  onchange="imgPreObj.changeFiles(this)"/> 
  10.             <div id="preview"><img src="" id="imgPre"></div> 
  11.         </div> 
  12.     </body> 
  13. </html> 

javascript代码:

 

  1. /** 
  2.  * @title 兼容多浏览器的图片上传预览 
  3.  * @support IE6+,Firefox,Opera,Chrome 
  4.  * @author gaorunqiao / goen88@163.com 
  5.  * @version g.f.i.p0.0.0.02 
  6.  * @date 2012/08/31 
  7.  */ 
  8.  
  9. //图片上传预览 
  10. function FILE_IMG_PREVIEW(imgID){ 
  11.     this.fileObj = {}; //input file对象 
  12.     this.imgID = imgID;   //输出图片对象ID 
  13.     this.formatFilter = ".jpg;.png;.gif;.bmp;"
  14.  
  15. //文件选取完成回调 
  16. FILE_IMG_PREVIEW.prototype.changeFiles = function(obj){ 
  17.     this.fileObj = obj; 
  18.     var oImgID = this.imgID; //输出图片ID 
  19.      
  20.     if(this.checkFormat()==falsereturn//文件格式检测 
  21.      
  22.     if(typeof FileReader != 'undefined'){ //支持html5读取文件URL 
  23.             var files = this.fileObj.files; 
  24.             if(files.length>0){ 
  25.                 var reader = new FileReader(); 
  26.                 reader.onloadend = function(e) { 
  27.                     document.getElementById(oImgID).src= this.result; 
  28.                 }  
  29.                 reader.readAsDataURL(files[0]); 
  30.             } 
  31.     }else
  32.         document.getElementById(oImgID).src = this.getPath(); 
  33.     } 
  34.  
  35. //获取本地文件路径 
  36. FILE_IMG_PREVIEW.prototype.getPath = function(){ 
  37.      if (this.fileObj) {  
  38.           //取得IE下本地图片路径     
  39.           if (window.navigator.userAgent.indexOf("MSIE") >= 1) {     
  40.               this.fileObj.select();  
  41.               this.fileObj.blur(); 
  42.               // IE下取得图片的本地路径     
  43.               return document.selection.createRange().text;     
  44.           }     
  45.           //firefox     
  46.           else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {   
  47.               if (this.fileObj.files) {   
  48.                   // Firefox下取得的是图片的数据     
  49.                   return this.fileObj.files.item(0).getAsDataURL();   
  50.               }     
  51.               return this.fileObj.value;     
  52.           }     
  53.           return this.fileObj.value;     
  54.      }else
  55.         return ''
  56.      } 
  57.  
  58. //检测上传文件的格式 
  59. FILE_IMG_PREVIEW.prototype.checkFormat = function(){ 
  60.     var upfile = this.fileObj.value; 
  61.     var format = upfile.substr(upfile.lastIndexOf('.')).toLowerCase(); 
  62.      
  63.     if(this.formatFilter.indexOf(format)!=-1){ 
  64.         return true
  65.     }else
  66.         alert('错误:文件格式不正确,只支持'+this.formatFilter); 
  67.         return false
  68.     }