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 相关文章推荐
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
原生js实现弹窗消息动画
Nov 20 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue实现购物车案例
2020/05/30 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
在Python中编写数据库模块的教程
2015/04/29 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
基于Python测试程序是否有错误
2020/05/16 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
遗体告别仪式主持词
2014/03/20 职场文书
村长贪污检举信
2014/04/04 职场文书
遗嘱继承公证书
2014/04/09 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
承诺书格式范文
2014/06/03 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android