jquery实现图片上传之前预览的方法


Posted in Javascript onJuly 11, 2015

本文实例讲述了jquery实现图片上传之前预览的方法。分享给大家供大家参考。具体实现方法如下:

<!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></title>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
/*
*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法: 
<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
  uploadPreview: function (opts) {
    var _self = this,
      _this = $(this);
    opts = jQuery.extend({
      Img: "ImgPr",
      Width: 100,
      Height: 100,
      ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
      Callback: function () {}
    }, opts || {});
    _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
    };
    _this.change(function () {
      if (this.value) {
        if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
          alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
          this.value = "";
          return false
        }
        if ($.browser.msie) {
          try {
            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
          } catch (e) {
            var src = "";
            var obj = $("#" + opts.Img);
            var div = obj.parent("div")[0];
            _self.select();
            if (top != self) {
              window.parent.document.body.focus()
            } else {
              _self.blur()
            }
            src = document.selection.createRange().text;
            document.selection.empty();
            obj.hide();
            obj.parent("div").css({
              'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
              'width': opts.Width + 'px',
              'height': opts.Height + 'px'
            });
            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
          }
        } else {
          $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
        }
        opts.Callback()
      }
    })
  }
});
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2>
<div><img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
</div>
</body>
</html>

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

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
jQuery知识点整理
Jan 30 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
vue无限轮播插件代码实例
May 10 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
JavaScript使用RegExp进行正则匹配的方法
Jul 11 #Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 #Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 #Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 #Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 #Javascript
JavaScript模板引擎用法实例
Jul 10 #Javascript
JavaScript实现打字效果的方法
Jul 10 #Javascript
You might like
php数组转成json格式的方法
2015/03/09 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python与php实现分割文件代码
2017/03/06 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python交互式图形编程实例(一)
2017/11/17 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python获取本机所有IP地址的方法
2018/12/26 Python
详解Python中namedtuple的使用
2020/04/27 Python
详解Python中import机制
2020/09/11 Python
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
幼儿园教师考核制度
2014/02/01 职场文书
小学教学随笔感言
2014/02/26 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
学会感恩主题班会
2015/08/12 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
四十九个javascript小知识实用技巧
2021/11/20 Javascript