ie6,ie7,ie8和firefox下兼容的图片上传预览

时间:2022-03-24 13:36:59
 

文章转载  ---http://669341085.iteye.com/blog/874153               --谢谢分享

不需要后台支持,完全在前台通过js完成的

用到了一个jquery插件 image-upload-preview

下载地址:

http://code.google.com/p/image-upload-preview/

 

下面的代码是里面的示例:

 

Html代码  ie6,ie7,ie8和firefox下兼容的图片上传预览
  1. <html>  
  2. <head>  
  3.   <title>Image Upload Preview Demo</title>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.   <!-- Make sure that we can test against real IE8 -->  
  6.   <meta http-equiv="X-UA-Compatible" content="IE=8"/>  
  7.   <script src="imageuploadpreview.js"></script>  
  8.   <style type="text/css">  
  9.     body {  
  10.       margin: 20px;  
  11.       font: 80% / normal 'arial', 'sans-serif';  
  12.     }  
  13.   
  14.     #upload {  
  15.       border: solid 3px #ccc;  
  16.     }  
  17.   
  18.     .preview-image {  
  19.       display: block;  
  20.       margin: 10px 0;  
  21.       border: solid 3px #aaa;  
  22.       padding: 1px;  
  23.       background: #fff;  
  24.     }  
  25.   </style>  
  26. </head>  
  27. <body>  
  28.   
  29. <h1>Image Upload Preview Demo</h1>  
  30.   
  31. <p>Now's it's only compatible with IE6, IE7, IE8, and Firefox 3</p>  
  32.   
  33. <p>  
  34.   <a href="http://code.google.com/p/image-upload-preview/">Google code project  
  35.     home  
  36.   </a>  
  37. </p>  
  38.   
  39. <form>  
  40.   <input type="file" id="upload" style="width:400px; padding:3px;"/>  
  41.   <div id="file-info"></div>  
  42. </form>  
  43.   
  44.   
  45. <script type="text/javascript">  
  46.   (function() {  
  47.     var demo = new ImageUploadPreview(  
  48.           
  49.         // Upload Input Element  
  50.         document.getElementById('upload'),  
  51.   
  52.         // onPreviewSuccess handler.  
  53.         function(imgInfo) {  
  54.           var info = [];  
  55.           for (var i in imgInfo) {  
  56.             info.push('<li>', i, ' = ', imgInfo[i], '</li>');  
  57.           }  
  58.   
  59.           if (info.length) {  
  60.             info.unshift('<ul>');  
  61.             info.push('</ul>');  
  62.           }  
  63.           this.getImageElement().className = 'preview-image';  
  64.           document.getElementById('file-info').innerHTML = info.join('');  
  65.         },  
  66.   
  67.         // onPreviewFail handler.  
  68.         function() {  
  69.           this.getImageElement().className = '';  
  70.         });  
  71.   
  72.     demo.setMaxImageSize(demo.getInputElement().offsetWidth, 300);  
  73.   
  74.   
  75.     // If the value already exists, try display image.  
  76.     demo.preview();  
  77.   })();  
  78. </script>  
  79. </body>  
  80. </html>  

 调整file的宽度,就可以调整预览图片的宽度

Js代码  ie6,ie7,ie8和firefox下兼容的图片上传预览
  1. /** 
  2.  * @fileoverview 
  3.  * JavaScript Image Upload Preview. 
  4.  * Tested and compatible with IE6, IE7, IE8, Firefox 3. 
  5.  *  
  6.  * @author Hedger Wang (hedgerwang@gmail.com) 
  7.  * 
  8.  */  
  9.   
  10. /** 
  11.  * @constructor 
  12.  * @param {HTMLInputElement|String} input 
  13.  * @param {Function?} opt_onSuccess 
  14.  * @param {Function?} opt_onFail 
  15.  */  
  16. function ImageUploadPreview(input, opt_onSuccess, opt_onFail) {  
  17.   this.construct(input, opt_onSuccess, opt_onFail);  
  18. }  
  19.   
  20. /** 
  21.  * Empty image that shows either for Http:// or Https://. 
  22.  * @define {String} 
  23.  */  
  24. ImageUploadPreview.BLANK_IMAGE_SRC = '//www.google.com/images/cleardot.gif';  
  25.   
  26.   
  27. /** 
  28.  * @define {RegExp} 
  29.  */  
  30. ImageUploadPreview.BASE64_IMG_URL_PATTERN =  
  31. /^data:image\/((png)|(gif)|(jpg)|(jpeg)|(bmp));base64/i;  
  32.   
  33.   
  34. /** 
  35.  * @type {HTMLInputElement} 
  36.  * @private 
  37.  */  
  38. ImageUploadPreview.prototype.input_ = null;  
  39.   
  40.   
  41. /** 
  42.  * @type {Function} 
  43.  * @private 
  44.  */  
  45. ImageUploadPreview.prototype.onChangeHandler_ = null;  
  46.   
  47.   
  48. /** 
  49.  * @type {Function} 
  50.  * @private 
  51.  */  
  52. ImageUploadPreview.prototype.onPreviewSuccessHandler_ = null;  
  53.   
  54.   
  55. /** 
  56.  * @type {Function} 
  57.  * @private 
  58.  */  
  59. ImageUploadPreview.prototype.onPreviewFailHandler_ = null;  
  60.   
  61.   
  62. /** 
  63.  * @type {HTMLImageElement} 
  64.  * @private 
  65.  */  
  66. ImageUploadPreview.prototype.image_ = null;  
  67.   
  68.   
  69. /** 
  70.  * @private 
  71.  * @type {boolean} 
  72.  */  
  73. ImageUploadPreview.prototype.isCompatible_ = null;  
  74.   
  75.   
  76. /** 
  77.  * @private 
  78.  * @type {Number} 
  79.  */  
  80. ImageUploadPreview.prototype.maxWidth_ = 200;  
  81.   
  82.   
  83. /** 
  84.  * @private 
  85.  * @type {Number} 
  86.  */  
  87. ImageUploadPreview.prototype.maxHeight_ = 200;  
  88.   
  89.   
  90. /** 
  91.  * @param {HTMLInputElement|String} input 
  92.  * @param {Function?} opt_onSuccess 
  93.  * @param {Function?} opt_onFail  
  94.  * @public 
  95.  */  
  96. ImageUploadPreview.prototype.construct =  
  97. function(input, opt_onSuccess, opt_onFail) {  
  98.   if (typeof input == 'string') {  
  99.     input = document.getElementById(input);  
  100.   }  
  101.   
  102.   this.onPreviewFailHandler_ = opt_onFail;  
  103.   this.onPreviewSuccessHandler_ = opt_onSuccess;  
  104.   this.input_ = input;  
  105.   this.bindEvents_();  
  106.   this.image_ = this.createImage_();  
  107. };  
  108.   
  109.   
  110. /** 
  111.  * @public 
  112.  */  
  113. ImageUploadPreview.prototype.dispose = function() {  
  114.   var fn = this.onChangeHandler_;  
  115.   
  116.   // Already disposed.  
  117.   if (!fn) return;  
  118.   
  119.   var el = this.input_;  
  120.   
  121.   if (el.addEventListener) {  
  122.     el.removeEventListener('change', fn, false);  
  123.   } else if (el.attachEvent) {  
  124.     el.detachEvent('onchange', fn);  
  125.   }  
  126.   
  127.   this.onChangeHandler_ = null;  
  128.   this.input_ = null;  
  129.   this.image_ = null;  
  130. };  
  131.   
  132. /** 
  133.  * @public 
  134.  */  
  135. ImageUploadPreview.prototype.preview = function() {  
  136.   var that = this;  
  137.   
  138.   var onLoad = function(imgInfo) {  
  139.     // Do thing now, maybe do something later.  
  140.     that.maybeCallFunction_(that.onPreviewSuccessHandler_, imgInfo);  
  141.   };  
  142.   
  143.   var onError = function(src) {  
  144.     if (!tryLoad()) {  
  145.       that.showEmptyImage_();  
  146.       that.maybeCallFunction_(that.onPreviewFailHandler_, src);  
  147.     }  
  148.   };  
  149.   
  150.   var loadMethods = [  
  151.     this.maybeShowImageWithDataUri_,  
  152.     this.maybeShowImageByPath_  
  153.   ];  
  154.   
  155.   var tryLoad = function() {  
  156.     if (!loadMethods.length) {  
  157.       return false;  
  158.     }  
  159.     var fn = loadMethods.shift();  
  160.     fn.call(that, onLoad, onError);  
  161.     return true;  
  162.   };  
  163.   tryLoad();  
  164. };  
  165.   
  166.   
  167. /** 
  168.  * @public 
  169.  * @return {HTMLImageElement} 
  170.  */  
  171. ImageUploadPreview.prototype.getImageElement = function() {  
  172.   return this.image_;  
  173. };  
  174.   
  175.   
  176. /** 
  177.  * @public 
  178.  * @return {HTMLInputElement} 
  179.  */  
  180. ImageUploadPreview.prototype.getInputElement = function() {  
  181.   return this.input_;  
  182. };  
  183.   
  184.   
  185. /** 
  186.  * @public 
  187.  * @param {Number} maxW 
  188.  * @param {Number} maxH 
  189.  */  
  190. ImageUploadPreview.prototype.setMaxImageSize = function(maxW, maxH) {  
  191.   this.maxHeight_ = isNaN(maxH) ? 10000 : maxH;  
  192.   this.maxWidth_ = isNaN(maxW) ? 10000 : maxW;  
  193. };  
  194.   
  195.   
  196. /** 
  197.  * @private 
  198.  * @return {HTMLImageElement} 
  199.  */  
  200. ImageUploadPreview.prototype.createImage_ = function() {  
  201.   var doc = this.input_.document || this.input_.ownerDocument;  
  202.   var img = doc.createElement('img');  
  203.   img.src = ImageUploadPreview.BLANK_IMAGE_SRC;  
  204.   img.width = 0;  
  205.   img.height = 0;  
  206.   this.input_.parentNode.insertBefore(img, this.input_.nextSibling || null);  
  207.   return img;  
  208. };  
  209.   
  210.   
  211. /** 
  212.  * @private 
  213.  */  
  214. ImageUploadPreview.prototype.bindEvents_ = function() {  
  215.   var that = this;  
  216.   
  217.   var fn = this.onChangeHandler_ = function(e) {  
  218.     e = e || window.event;  
  219.   
  220.     if (!e.target && e.srcElement) {  
  221.       e.target = e.srcElement;  
  222.     }  
  223.   
  224.     that.handleOnchange_.call(that, e);  
  225.   };  
  226.   
  227.   var el = this.input_;  
  228.   
  229.   if (el.addEventListener) {  
  230.     el.addEventListener('change', fn, false);  
  231.   } else if (el.attachEvent) {  
  232.     el.attachEvent('onchange', fn);  
  233.   }  
  234. };  
  235.   
  236.   
  237. /** 
  238.  * @param {Event} e 
  239.  * @private 
  240.  */  
  241. ImageUploadPreview.prototype.handleOnchange_ = function(e) {  
  242.   this.preview();  
  243. };  
  244.   
  245.   
  246. /** 
  247.  * @private 
  248.  */  
  249. ImageUploadPreview.prototype.showEmptyImage_ = function() {  
  250.   this.showImage_(ImageUploadPreview.BLANK_IMAGE_SRC, 0, 0)  
  251. };  
  252.   
  253.   
  254. /** 
  255.  * @private 
  256.  * @param {string} src 
  257.  * @param {number} w 
  258.  * @param {number} h 
  259.  */  
  260. ImageUploadPreview.prototype.showImage_ = function(src, w, h) {  
  261.   
  262.   if (w > h) {  
  263.     if (w > this.maxWidth_) {  
  264.       h = h * this.maxWidth_ / w;  
  265.       w = this.maxWidth_;  
  266.     }  
  267.   } else {  
  268.     if (h > this.maxHeight_) {  
  269.       w = w * this.maxHeight_ / h;  
  270.       h = this.maxHeight_;  
  271.     }  
  272.   }  
  273.   
  274.   var img = this.image_;  
  275.   img.src = src;  
  276.   
  277.   var imgStyle = img.style;  
  278.   imgStyle.maxHeight = this.maxHeight_ + 'px';  
  279.   imgStyle.maxWidth = this.maxWidth_ + 'px';  
  280.   imgStyle.width = (w >= 0) ? Math.round(w) + 'px' : 'auto';  
  281.   imgStyle.height = (h >= 0) ? Math.round(h) + 'px' : 'auto';  
  282. };  
  283.   
  284.   
  285. /** 
  286.  * @param {Function?} fn 
  287.  * @param {Object?} var_args 
  288.  */  
  289. ImageUploadPreview.prototype.maybeCallFunction_ = function(fn, var_args) {  
  290.   if (typeof fn != 'function'return;  
  291.   var_args = Array.prototype.slice.call(arguments, 1);  
  292.   fn.apply(this, var_args);  
  293. };  
  294.   
  295.   
  296. /** 
  297.  * Note: Only Firefox 3 can do file.getAsDataURL() by 6/1/2009. 
  298.  * See {@link https://developer.mozilla.org/En/NsIDOMFile}. 
  299.  * @private 
  300.  * @param {Function?} opt_onload 
  301.  * @param {Function?} opt_onerror 
  302.  */  
  303. ImageUploadPreview.prototype.maybeShowImageWithDataUri_ =  
  304. function(opt_onload, opt_onerror) {  
  305.   var el = this.input_;  
  306.   var file = el.files && el.files[0];  
  307.   var src;  
  308.   var fileName = el.value;  
  309.   
  310.   // Check if we can access the serialized file via getAsDataURL().  
  311.   if ((file && file.getAsDataURL) &&  
  312.       (src = file.getAsDataURL()) &&  
  313.       (ImageUploadPreview.BASE64_IMG_URL_PATTERN.test(src))) {  
  314.   
  315.     var that = this;  
  316.     var img = this.image_;  
  317.   
  318.   
  319.     if ('naturalWidth' in this.image_) {  
  320.       // Firefox has naturalWidth.  
  321.       this.image_.src = src;  
  322.   
  323.       setTimeout(function() {  
  324.         that.showImage_(src, img.naturalWidth, img.naturalHeight);  
  325.         that.maybeCallFunction_(opt_onload, {  
  326.           width: img.naturalWidth,  
  327.           height: img.naturalHeight,  
  328.           fileName : fileName,  
  329.           fileSize: el.files[0].fileSize  
  330.         });  
  331.       }, 10);  
  332.   
  333.     } else {  
  334.       // Use default CSS max-width / max-height to render the size.  
  335.       that.showImage_(src, -1, -1);  
  336.   
  337.       this.maybeCallFunction_(opt_onload, {  
  338.         fileName : fileName,  
  339.         width: img.offsetWidth,  
  340.         height: img.offsetHeight,  
  341.         fileSize: el.files[0].fileSize  
  342.       });  
  343.     }  
  344.   } else {  
  345.     this.maybeCallFunction_(opt_onerror, fileName);  
  346.   }  
  347. };  
  348.   
  349.   
  350. /** 
  351.  * Note: IE6 ~ IE8 can access image with local path. By 6/1/2009. 
  352.  *       However, this may still not work if the security setting changes. 
  353.  * @private 
  354.  * @param {Function?} opt_onload 
  355.  * @param {Function?} opt_onerror 
  356.  */  
  357. ImageUploadPreview.prototype.maybeShowImageByPath_ =  
  358. function(opt_onload, opt_onerror) {  
  359.   
  360.   var that = this;  
  361.   var el = this.input_;  
  362.   var img = new Image();  
  363.   var timer;  
  364.   var fileName = el.value.split(/[\\\/]/ig).pop();  
  365.   
  366.   var dispose = function() {  
  367.     if (timer) {  
  368.       window.clearInterval(timer);  
  369.     }  
  370.     img.onload = null;  
  371.     img.onerror = null;  
  372.     timer = null;  
  373.     dispose = null;  
  374.     img = null;  
  375.     that = null;  
  376.     checkIsComplete = null;  
  377.     handleError = null;  
  378.     handleComplete = null;  
  379.   };  
  380.   
  381.   // Handle the case whether the File is not a image file or the path is not a  
  382.   // valid path to access.  
  383.   var handleError = function() {  
  384.     that.maybeCallFunction_(opt_onerror, el.value);  
  385.     dispose();  
  386.   };  
  387.   
  388.   var handleComplete = function() {  
  389.     var w = img.width;  
  390.     var h = img.height;  
  391.     that.showImage_(img.src, w, h);  
  392.     that.maybeCallFunction_(opt_onload, {  
  393.       src:fileName,  
  394.       width: w,  
  395.       height: h,  
  396.       fileSize: img.fileSize // Note that FileSize is an IE's only attribute.  
  397.     });  
  398.     dispose();  
  399.   };  
  400.   
  401.   var checkIsComplete = function(e) {  
  402.     e = e || window.event;  
  403.     var type = e && e.type;  
  404.   
  405.     if (type == 'error') {  
  406.       // If the onError event is called.  
  407.       handleError();  
  408.     } else  if (img.complete || type == 'load') {  
  409.       // Sometimes IE does not fire "onload" event if the image was cahced.  
  410.       // So we have to check the "complete" state to know whether it's ready.  
  411.       if (!img.width || !img.height) {  
  412.         // Even it's not a real image, the onload event may still gets fired.  
  413.         // Check if its width or height is 0. If true, it's not a real image.  
  414.         handleError();  
  415.       } else {  
  416.         handleComplete();  
  417.       }  
  418.     }  
  419.   };  
  420.   
  421.   img.onload = checkIsComplete;  
  422.   img.onerror = checkIsComplete;  
  423.   timer = window.setInterval(checkIsComplete, 50);  
  424.   
  425.   // In IE, el.value us the full path of the file rather than just the fileName,  
  426.   // and we'd test if we can load image from this path.  
  427.   img.src = el.value;  
  428.   
  429. };