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控制上传文件的大小
Oct 26 Javascript
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
js实现跨域的多种方法
Dec 25 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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+APACHE实现用户论证的方法
2006/10/09 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
python多任务之协程的使用详解
2019/08/26 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
村委会换届选举方案
2014/05/03 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
环卫工作个人总结
2015/03/04 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL