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


Posted in Javascript onNovember 25, 2016

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

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

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

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

html如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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();
            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();
      }
    }
  }
  /*
  *work:执行绑定事件
  */
  _self.Bind();
}

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

Javascript 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
分析JS中this引发的bug
Dec 12 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 #Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 #Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 #Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 #Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 #Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 #Javascript
使用JS读取XML文件的方法
Nov 25 #Javascript
You might like
phpmyadmin的#1251问题
2006/11/25 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php中autoload的用法总结
2013/11/08 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python实现k-means算法
2018/02/23 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python partial函数原理及用法解析
2019/12/11 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
小学国庆节活动方案
2014/02/11 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
英语系本科生求职信
2014/07/15 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python