`

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

FirefoxprototypeIEGooglejQuery 
阅读更多

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

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

下载地址：

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

 

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

 

<html>
<head>
  <title>Image Upload Preview Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!-- Make sure that we can test against real IE8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=8"/>
  <script src="imageuploadpreview.js"></script>
  <style type="text/css">
    body {
      margin: 20px;
      font: 80% / normal 'arial', 'sans-serif';
    }

    #upload {
      border: solid 3px #ccc;
    }

    .preview-image {
      display: block;
      margin: 10px 0;
      border: solid 3px #aaa;
      padding: 1px;
      background: #fff;
    }
  </style>
</head>
<body>

<h1>Image Upload Preview Demo</h1>

<p>Now's it's only compatible with IE6, IE7, IE8, and Firefox 3</p>

<p>
  <a href="http://code.google.com/p/image-upload-preview/">Google code project
    home
  </a>
</p>

<form>
  <input type="file" id="upload" style="width:400px; padding:3px;"/>
  <div id="file-info"></div>
</form>


<script type="text/javascript">
  (function() {
    var demo = new ImageUploadPreview(
        
        // Upload Input Element
        document.getElementById('upload'),

        // onPreviewSuccess handler.
        function(imgInfo) {
          var info = [];
          for (var i in imgInfo) {
            info.push('<li>', i, ' = ', imgInfo[i], '</li>');
          }

          if (info.length) {
            info.unshift('<ul>');
            info.push('</ul>');
          }
          this.getImageElement().className = 'preview-image';
          document.getElementById('file-info').innerHTML = info.join('');
        },

        // onPreviewFail handler.
        function() {
          this.getImageElement().className = '';
        });

    demo.setMaxImageSize(demo.getInputElement().offsetWidth, 300);


    // If the value already exists, try display image.
    demo.preview();
  })();
</script>
</body>
</html>

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

/**
 * @fileoverview
 * JavaScript Image Upload Preview.
 * Tested and compatible with IE6, IE7, IE8, Firefox 3.
 * 
 * @author Hedger Wang (hedgerwang@gmail.com)
 *
 */

/**
 * @constructor
 * @param {HTMLInputElement|String} input
 * @param {Function?} opt_onSuccess
 * @param {Function?} opt_onFail
 */
function ImageUploadPreview(input, opt_onSuccess, opt_onFail) {
  this.construct(input, opt_onSuccess, opt_onFail);
}

/**
 * Empty image that shows either for Http:// or Https://.
 * @define {String}
 */
ImageUploadPreview.BLANK_IMAGE_SRC = '//www.google.com/images/cleardot.gif';


/**
 * @define {RegExp}
 */
ImageUploadPreview.BASE64_IMG_URL_PATTERN =
/^data:image\/((png)|(gif)|(jpg)|(jpeg)|(bmp));base64/i;


/**
 * @type {HTMLInputElement}
 * @private
 */
ImageUploadPreview.prototype.input_ = null;


/**
 * @type {Function}
 * @private
 */
ImageUploadPreview.prototype.onChangeHandler_ = null;


/**
 * @type {Function}
 * @private
 */
ImageUploadPreview.prototype.onPreviewSuccessHandler_ = null;


/**
 * @type {Function}
 * @private
 */
ImageUploadPreview.prototype.onPreviewFailHandler_ = null;


/**
 * @type {HTMLImageElement}
 * @private
 */
ImageUploadPreview.prototype.image_ = null;


/**
 * @private
 * @type {boolean}
 */
ImageUploadPreview.prototype.isCompatible_ = null;


/**
 * @private
 * @type {Number}
 */
ImageUploadPreview.prototype.maxWidth_ = 200;


/**
 * @private
 * @type {Number}
 */
ImageUploadPreview.prototype.maxHeight_ = 200;


/**
 * @param {HTMLInputElement|String} input
 * @param {Function?} opt_onSuccess
 * @param {Function?} opt_onFail 
 * @public
 */
ImageUploadPreview.prototype.construct =
function(input, opt_onSuccess, opt_onFail) {
  if (typeof input == 'string') {
    input = document.getElementById(input);
  }

  this.onPreviewFailHandler_ = opt_onFail;
  this.onPreviewSuccessHandler_ = opt_onSuccess;
  this.input_ = input;
  this.bindEvents_();
  this.image_ = this.createImage_();
};


/**
 * @public
 */
ImageUploadPreview.prototype.dispose = function() {
  var fn = this.onChangeHandler_;

  // Already disposed.
  if (!fn) return;

  var el = this.input_;

  if (el.addEventListener) {
    el.removeEventListener('change', fn, false);
  } else if (el.attachEvent) {
    el.detachEvent('onchange', fn);
  }

  this.onChangeHandler_ = null;
  this.input_ = null;
  this.image_ = null;
};

/**
 * @public
 */
ImageUploadPreview.prototype.preview = function() {
  var that = this;

  var onLoad = function(imgInfo) {
    // Do thing now, maybe do something later.
    that.maybeCallFunction_(that.onPreviewSuccessHandler_, imgInfo);
  };

  var onError = function(src) {
    if (!tryLoad()) {
      that.showEmptyImage_();
      that.maybeCallFunction_(that.onPreviewFailHandler_, src);
    }
  };

  var loadMethods = [
    this.maybeShowImageWithDataUri_,
    this.maybeShowImageByPath_
  ];

  var tryLoad = function() {
    if (!loadMethods.length) {
      return false;
    }
    var fn = loadMethods.shift();
    fn.call(that, onLoad, onError);
    return true;
  };
  tryLoad();
};


/**
 * @public
 * @return {HTMLImageElement}
 */
ImageUploadPreview.prototype.getImageElement = function() {
  return this.image_;
};


/**
 * @public
 * @return {HTMLInputElement}
 */
ImageUploadPreview.prototype.getInputElement = function() {
  return this.input_;
};


/**
 * @public
 * @param {Number} maxW
 * @param {Number} maxH
 */
ImageUploadPreview.prototype.setMaxImageSize = function(maxW, maxH) {
  this.maxHeight_ = isNaN(maxH) ? 10000 : maxH;
  this.maxWidth_ = isNaN(maxW) ? 10000 : maxW;
};


/**
 * @private
 * @return {HTMLImageElement}
 */
ImageUploadPreview.prototype.createImage_ = function() {
  var doc = this.input_.document || this.input_.ownerDocument;
  var img = doc.createElement('img');
  img.src = ImageUploadPreview.BLANK_IMAGE_SRC;
  img.width = 0;
  img.height = 0;
  this.input_.parentNode.insertBefore(img, this.input_.nextSibling || null);
  return img;
};


/**
 * @private
 */
ImageUploadPreview.prototype.bindEvents_ = function() {
  var that = this;

  var fn = this.onChangeHandler_ = function(e) {
    e = e || window.event;

    if (!e.target && e.srcElement) {
      e.target = e.srcElement;
    }

    that.handleOnchange_.call(that, e);
  };

  var el = this.input_;

  if (el.addEventListener) {
    el.addEventListener('change', fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('onchange', fn);
  }
};


/**
 * @param {Event} e
 * @private
 */
ImageUploadPreview.prototype.handleOnchange_ = function(e) {
  this.preview();
};


/**
 * @private
 */
ImageUploadPreview.prototype.showEmptyImage_ = function() {
  this.showImage_(ImageUploadPreview.BLANK_IMAGE_SRC, 0, 0)
};


/**
 * @private
 * @param {string} src
 * @param {number} w
 * @param {number} h
 */
ImageUploadPreview.prototype.showImage_ = function(src, w, h) {

  if (w > h) {
    if (w > this.maxWidth_) {
      h = h * this.maxWidth_ / w;
      w = this.maxWidth_;
    }
  } else {
    if (h > this.maxHeight_) {
      w = w * this.maxHeight_ / h;
      h = this.maxHeight_;
    }
  }

  var img = this.image_;
  img.src = src;

  var imgStyle = img.style;
  imgStyle.maxHeight = this.maxHeight_ + 'px';
  imgStyle.maxWidth = this.maxWidth_ + 'px';
  imgStyle.width = (w >= 0) ? Math.round(w) + 'px' : 'auto';
  imgStyle.height = (h >= 0) ? Math.round(h) + 'px' : 'auto';
};


/**
 * @param {Function?} fn
 * @param {Object?} var_args
 */
ImageUploadPreview.prototype.maybeCallFunction_ = function(fn, var_args) {
  if (typeof fn != 'function') return;
  var_args = Array.prototype.slice.call(arguments, 1);
  fn.apply(this, var_args);
};


/**
 * Note: Only Firefox 3 can do file.getAsDataURL() by 6/1/2009.
 * See {@link https://developer.mozilla.org/En/NsIDOMFile}.
 * @private
 * @param {Function?} opt_onload
 * @param {Function?} opt_onerror
 */
ImageUploadPreview.prototype.maybeShowImageWithDataUri_ =
function(opt_onload, opt_onerror) {
  var el = this.input_;
  var file = el.files && el.files[0];
  var src;
  var fileName = el.value;

  // Check if we can access the serialized file via getAsDataURL().
  if ((file && file.getAsDataURL) &&
      (src = file.getAsDataURL()) &&
      (ImageUploadPreview.BASE64_IMG_URL_PATTERN.test(src))) {

    var that = this;
    var img = this.image_;


    if ('naturalWidth' in this.image_) {
      // Firefox has naturalWidth.
      this.image_.src = src;

      setTimeout(function() {
        that.showImage_(src, img.naturalWidth, img.naturalHeight);
        that.maybeCallFunction_(opt_onload, {
          width: img.naturalWidth,
          height: img.naturalHeight,
          fileName : fileName,
          fileSize: el.files[0].fileSize
        });
      }, 10);

    } else {
      // Use default CSS max-width / max-height to render the size.
      that.showImage_(src, -1, -1);

      this.maybeCallFunction_(opt_onload, {
        fileName : fileName,
        width: img.offsetWidth,
        height: img.offsetHeight,
        fileSize: el.files[0].fileSize
      });
    }
  } else {
    this.maybeCallFunction_(opt_onerror, fileName);
  }
};


/**
 * Note: IE6 ~ IE8 can access image with local path. By 6/1/2009.
 *       However, this may still not work if the security setting changes.
 * @private
 * @param {Function?} opt_onload
 * @param {Function?} opt_onerror
 */
ImageUploadPreview.prototype.maybeShowImageByPath_ =
function(opt_onload, opt_onerror) {

  var that = this;
  var el = this.input_;
  var img = new Image();
  var timer;
  var fileName = el.value.split(/[\\\/]/ig).pop();

  var dispose = function() {
    if (timer) {
      window.clearInterval(timer);
    }
    img.onload = null;
    img.onerror = null;
    timer = null;
    dispose = null;
    img = null;
    that = null;
    checkIsComplete = null;
    handleError = null;
    handleComplete = null;
  };

  // Handle the case whether the File is not a image file or the path is not a
  // valid path to access.
  var handleError = function() {
    that.maybeCallFunction_(opt_onerror, el.value);
    dispose();
  };

  var handleComplete = function() {
    var w = img.width;
    var h = img.height;
    that.showImage_(img.src, w, h);
    that.maybeCallFunction_(opt_onload, {
      src:fileName,
      width: w,
      height: h,
      fileSize: img.fileSize // Note that FileSize is an IE's only attribute.
    });
    dispose();
  };

  var checkIsComplete = function(e) {
    e = e || window.event;
    var type = e && e.type;

    if (type == 'error') {
      // If the onError event is called.
      handleError();
    } else  if (img.complete || type == 'load') {
      // Sometimes IE does not fire "onload" event if the image was cahced.
      // So we have to check the "complete" state to know whether it's ready.
      if (!img.width || !img.height) {
        // Even it's not a real image, the onload event may still gets fired.
        // Check if its width or height is 0. If true, it's not a real image.
        handleError();
      } else {
        handleComplete();
      }
    }
  };

  img.onload = checkIsComplete;
  img.onerror = checkIsComplete;
  timer = window.setInterval(checkIsComplete, 50);

  // In IE, el.value us the full path of the file rather than just the fileName,
  // and we'd test if we can load image from this path.
  img.src = el.value;

};

 

分享到：
| Struts 2中实现文件下载（修正中文问题）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics