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 相关文章推荐
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
vue路由插件之vue-route
Jun 13 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
微信小程序开发之实现选项卡(窗口顶部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
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
让焦点自动跳转
2006/07/01 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
vue-axios使用详解
2017/05/10 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
成绩单公证书
2014/04/10 职场文书
火箭队口号
2014/06/18 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
作文评语怎么写
2014/12/25 职场文书
质检员岗位职责范本
2015/04/07 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
MySQL 数据 data 基本操作
2022/05/04 MySQL