JQuery上传插件Uploadify + Jcrop图像裁剪的几个常用小技巧

简介:

一、限制上传大小、图片尺寸

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
     $('#select').uploadify({
         'swf': '/plugin/uploadify/uploadify.swf',
         'uploader': '/work/imageUploadServlet.up',
         'formData': {
             'operateType': 'activity.product'
         },
         'method': 'get',
         'cancelImg': '/plugin/uploadify/cancel.png',
         'auto': true,
         'multi': false,
         'fileTypeDesc': '请选择gif jpeg jpg文件',
         'fileTypeExts': '*.gif;*.jpeg;*.jpg;*.png',
         'sizeLimit': 1000 * 1024,
         'height': 19,
         'width': 60,
         'buttonImage': '/images/senior.png',
         'buttonText': '上传图片',
         'onSelect': function(file) {
            if (file.size > 5120 * 1024) { //限制上传文件大小为5M以内
                alert("上传大小不能超过 5M 哦~");
                $('#select').uploadify('cancel');
            }
         },
         'onUploadSuccess' : function(file, data, response) {
             var o = new Image();
             o.src = data;
             o.onload = function() {
                 var w = o.width;
                 var h = o.height;
                 if( w >= 130 && h >= 130) {
                     api.destroy();
                     $("#img").removeAttr("style");
                     $("#img").attr("src", data);
                     $("#preview").attr("src", data);
                 }else{
                      alert("图片尺寸需大于130*130");
                      $('#select').uploadify('cancel');
                 }
           
         },
         'onError' : function (event, queueID, fileObj) {
             alert("error!"+event);
             $('#uploadifyIndex').uploadify('cancel');
         }
     });

二、裁剪最小宽高限制,裁剪选框形状和尺寸限制。

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
function jcropload(){
         var minwidth = 130 * t; //最小宽:130px;
         var minheight = 130 * t; //最小高:130px;
         $("#img").Jcrop({
         boxWidth: width,
         boxHight: height,
         bgColor: 'black',
         bgOpacity: 0.5,
         addClass: 'jcrop-light',
         onChange: showCoords,
         onSelect: showCoords,
         onRelease: clearCoords,
         boundary: 5,
         aspectRatio: 1,  //裁剪比例:1为正方形、3/5为长方形等等
         minSize: [minwidth, minheight]         // 控制裁剪选框的最小裁剪尺寸
         },
         function() {
         var bounds = this.getBounds();
         boundx = bounds[0];
         boundy = bounds[1];
         api = this;
         // 调整裁剪选框的显示尺寸
         api.setSelect([width / 2 - 60, height / 2 - 60, width / 2 + 60, height / 2 + 60]);
         api.setOptions({
             bgFade: true
         });
         api.ui.selection.addClass('jcrop-selection');
         });
     }
     
//裁剪效果图显示
function showCoords(c) {
     if (parseInt(c.w) > 0) {
         var rx = 100 / c.w;  //根据裁剪选框宽高比例,在此调整效果图显示比例。下同
         var ry = 100 / c.h;
         $("#preview").css({
             width: Math.round(rx * boundx) + "px",
             height: Math.round(ry * boundy) + "px",
             marginLeft: "-" + Math.round(rx * c.x) + "px",
             marginTop: "-" + Math.round(ry * c.y) + "px"
         });
     };
     $('#x1').val(Math.round(c.x));
     $('#y1').val(Math.round(c.y));
     $('#x2').val(Math.round(c.x2));
     $('#y2').val(Math.round(c.y2));
     $('#w').val(Math.round(c.w));
     $('#h').val(Math.round(c.h));
};

三、上传按钮样式(swfupload)重写,让点击事件触发区域与上传按钮重合。

1
2
3
4
< style  type = "text/css" >
       /*弹出层上传按钮样式*/
       .swfupload{position:absolute;left:80px;top:16px};
</ style >

四、裁剪上传完成后页面清除原图,显示默认底图,且默认底图不可裁剪。

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
//图片裁剪上传
function jcrop() {
     var img = $("#img").attr("src");
     if(img!="/images/no_logo_pic.jpg"&&img!=""){
         $.ajax({
             type: "post",
             url: "/work/jcrop.up",
             dataType: "text",
             data: {
                 "x": Math.ceil($('#x1').val()/t),
                 "y": Math.ceil($('#y1').val()/t),
                 "w": Math.ceil($('#w').val() / t),
                 "h": Math.ceil($('#h').val() / t),
                 "srcPath": $("#img").attr("src"),
                 "tarPath": "activity.product"
             },
             success: function(data, textStatus) {
                 $("#yt_img").attr("src",data);
                 $("#activityImg").val(data);
                 $("#images").append("< li >< img  src = '"+data+"'  /></ li >");
                 api.destroy();
             $(".prodact_sc").hide();
             $(".back_a").hide();
             //图片裁剪并上传完毕之后清除
             $("#img").attr("src", "");
                 $("#preview").attr("src", "");
             }
         });
     }else{
         alert("请上传Logo");
     }
}
 
< img  id = "img"  src = "/images/no_logo_pic.jpg"  onload = "ImgAuto(this,432,249);"  onerror = "this.src='/images/no_logo_pic.jpg'"  />
< img  src = "/images/no_logo_pic.jpg"  id = "preview" onerror = "this.src='/images/no_logo_pic.jpg'"  />









本文转自 艺晨光 51CTO博客,原文链接:http://blog.51cto.com/ycgit/1707164,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
2月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
19 0
|
3月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
42 1
|
4月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
26 0
|
4月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
31 0
|
4月前
|
JavaScript 前端开发 数据格式
Jquery前端分页插件pagination使用
Jquery前端分页插件pagination使用
46 1
|
4月前
|
移动开发 JavaScript 前端开发
jQuery实现多种切换效果的图片切换的五款插件
jQuery实现多种切换效果的图片切换的五款插件
29 0
|
5月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
32 0
|
6月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
26 0
|
7月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
52 0

相关产品

  • 云迁移中心
  • 相关课程

    更多