JS实现的图片预览插件与用法示例

本文实例讲述了JS实现不需要上传的图片预览插件与用法。分享给大家供大家参考，具体如下：

小小的几十行代码，很牛逼，很实用。

支持多个图片的预览，只要new多个对象就行了。

html如下

插件uploadPreview.js代码如下

var uploadPreview = function(setting) {
  
  var _self = this;
  
  _self.IsNull = function(value) {
    if (typeof (value) == "function") { return false; }
    if (value == undefined || value == null || value == "" || value.length == 0) {
      return true;
    }
    return false;
  }
  
  _self.DefautlSetting = {
    UpBtn: "",
    DivShow: "",
    ImgShow: "",
    Width: 100,
    Height: 100,
    ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
    ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
    callback: function() { }
  };
  
  _self.Setting = {
    UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
    DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
    ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
    Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
    Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
    ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
    ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
    callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
  };
  
  _self.getObjectURL = function(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  
  _self.Bind = function() {
    document.getElementById(_self.Setting.UpBtn).onchange = function() {
      if (this.value) {
 if (!RegExp(".(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
   alert(_self.Setting.ErrMsg);
   this.value = "";
   return false;
 }
 if (navigator.userAgent.indexOf("MSIE") > -1) {
   try {
     document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
   } catch (e) {
     var div = document.getElementById(_self.Setting.DivShow);
     this.select();
     top.parent.document.body.focus();
     var src = document.selection.createRange().text;
     document.selection.empty();
     document.getElementById(_self.Setting.ImgShow).style.display = "none";
     div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
     div.style.width = _self.Setting.Width + "px";
     div.style.height = _self.Setting.Height + "px";
     div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
   }
 } else {
   document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
 }
 _self.Setting.callback();
      }
    }
  }
  
  _self.Bind();
}

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript文件与目录操作技巧汇总》、《Javascript切换特效与技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。