主页 / 网络编程 /

JS实现的图片预览插件与用法示例【不上传图片】

网络编程 2021-07-04 19:19www.168986.cn编程入门
这篇文章主要介绍了JS实现的图片预览插件与用法,基于自定义插件uploadPreview.js实现图片的预览功能,不需要进行图片的上传,非常简便实用,需要的朋友可以参考下

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

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

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

html如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
  <title>uploadPreview演示</title>
  <script src="uploadPreview.js" type="text/javascript"></script>
  <script>
    window.onload = function () { 
      new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
      new uploadPreview({ UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2" });
    }
  </script>
</head>
<body>
  <div id="imgdiv"><img id="imgShow" width="200"/></div>
  <input type="file" id="up_img" />
  <div id="imgdiv"><img id="imgShow2" width="200" /></div>
  <input type="file" id="up_img2" />
</body>
</html>

插件uploadPreview.js代码如下

/
发布时间:2014年12月12日
插件介绍:图片上传本地预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 如果是使用这些内核的浏览器基本都兼容
使用方法:
界面构造(IMG标签外必须拥有DIV 而且必须给予DIV控件ID)
 <div id="imgdiv"><img id="imgShow" width="120" height="120" /></div>
 <input type="file" id="up_img" />
调用代码:
 new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
参数说明:
UpBtn:选择文件控件ID;
DivShow:DIV控件ID;
ImgShow:图片控件ID;
Width:预览宽度;
Height:预览高度;
ImgType:支持文件类型 格式:["jpg","png"];
callback:选择文件后回调方法;
版本:v1.4
更新内容如下:
1.修复回调.
版本:v1.3
更新内容如下:
1.修复多层级框架获取路径BUG.
2.去除对jquery插件的依赖.
/
/
work:图片预览插件
/
var uploadPreview = function(setting) {
  /
  work:this(当前对象)
  /
  var _self = this;
  /
  work:判断为null或者空值
  /
  _self.IsNull = function(value) {
    if (typeof (value) == "function") { return false; }
    if (value == undefined || value == null || value == "" || value.length == 0) {
      return true;
    }
    return false;
  }
  /
  work:默认配置
  /
  _self.DefautlSetting = {
    UpBtn: "",
    DivShow: "",
    ImgShow: "",
    Width: 100,
    Height: 100,
    ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
    ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
    callback: function() { }
  };
  /
  work:读取配置
  /
  _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
  };
  /
  work:获取文本控件URL
  /
  _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;
  }
  /
  work:绑定事件
  /
  _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();
            .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();
      }
    }
  }
  /
  work:执行绑定事件
  /
  _self.Bind();
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》、《》及《》

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

上一篇：微信JS-SDK自定义分享功能实例详解【分享给朋友 下一篇：微信小程序开发之实现选项卡(窗口顶部TabBar)页面

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by