一、限制上传大小、图片尺寸
|
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，如需转载请自行联系原作者
