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 web页面刷新的方法收集
Jul 02 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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
PHP中的加密功能
2006/10/09 PHP
php+oracle 分页类
2006/10/09 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
javascript中的隐式调用
2018/02/10 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python进阶-函数默认参数(详解)
2017/05/18 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
经典促销广告词大全
2014/03/19 职场文书
融资合作协议书范本
2014/10/17 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
工会工作个人总结
2015/03/03 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript