关注迅速公众平台

关注迅速公众平台

关注迅速公众平台

关注微信联系人

企业电话：021-64391578

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


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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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) {
      varurl =null;
      if(window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
      }elseif(window.URL != undefined) {
        url = window.URL.createObjectURL(file)
      }elseif(window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
      }
      returnurl
    };
    _this.change(function() {
      if(this.value) {
        if(!RegExp("\.("+ opts.ImgType.join("|") +")$","i").test(this.value.toLowerCase())) {
          alert("选择文件错误,图片类型必须是"+ opts.ImgType.join("，") +"中的一种");
          this.value ="";
          returnfalse
        }
        if($.browser.msie) {
          try{
            $("#"+ opts.Img).attr('src', _self.getObjectURL(this.files[0]))
          }catch(e) {
            varsrc ="";
            varobj = $("#"+ opts.Img);
            vardiv = 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程序设计有所帮助。


相关推荐
企业内部管理APP定制开发功能需求简介
宠物app开发:可以最大限度地保证宠物购买的质量
线上k歌手机app开发功能需求有哪些？
郑州企业车辆管理系统软件开发优势简介
舞蹈培训app开发有哪些功能需求？

特别申明：本站的主旨在于收集互联网运营相关的干货知识，给运营小伙伴提供便利。 网站所收集到的公开内容均来自于互联网或用户投稿，并不代表本站认同其观点， 也不对网站内容的真实性负责，如有侵权，请联系站长删除

您可以联系我们

彼此协助, 彼此信任

方能将美好的蓝图兑现