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 相关文章推荐
js replace正则表达式应用案例讲解
Jan 17 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
javascript实现画板功能
Apr 12 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
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&amp;mysql(五)
2006/10/09 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php输入流php://input使用浅析
2014/09/02 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
asp.net和php的区别点总结
2019/10/10 PHP
jquery中获取select选中值的代码
2011/06/27 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python中处理unchecked未捕获异常实例
2015/01/17 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python中的字典使用分享
2016/07/31 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python支持多线程的爬虫实例
2019/12/21 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
高中生自我评价个人范文
2013/11/09 职场文书
副厂长岗位职责
2014/02/02 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
医德医风个人总结
2015/02/28 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
Python中super().__init__()测试以及理解
2021/12/06 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle