Several tips for JQuery upload plug-in Uploadify + Jcrop image Cropping

Several tips for JQuery upload plug-in Uploadify + Jcrop image Cropping
I. Restrict upload size and image size

$ ('# Select '). uploadify ({'swf ':'/plugin/uploadify/uploadify.swf ', 'upload':'/work/imageUploadServlet. up ', 'formdata': {'operateetype': 'activity. product '}, 'method': 'get', 'cancelim':'/plugin/uploadify/cancel.png ', 'auto': true, 'Multi': false, 'filetypedesc': 'select a gif jpeg jpg file ', 'filetypeexists ':'*. gif ;*. jpeg ;*. jpg ;*. png ', 'sizelimmit': 1000*1024, 'height': 19, 'width': 60, 'buttonimage ': '/Images/senior.png', 'buttontext': 'upload image', 'onselect': function (file) {if (file. size> 5120*1024) {// the size of the uploaded file is limited to 5 MB or less. alert ("the upload size cannot exceed 5 MB ~ "); $ ('# 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 ("image size must be greater than 130*130"); $ ('# select '). uploadify ('cancel') ;}}, 'o NError ': function (event, queueID, fileObj) {alert ("error! "+ Event); $ ('# uploadifyindex'). uploadify ('cancel ');}});

 

Ii. Minimum width and height limit for cropping, and frame shape and size limit for cropping.

Function jcropload () {var minwidth = 130 * t; // minimum width: 130px; var minheight = 130 * t; // minimum height: 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, // cropping ratio: 1 is a square, 3/5 is a rectangle, etc. minSize: [minwidth, minheight] // controls the minimum crop size of the cropping box}, function () {var boun Ds = this. getBounds (); boundx = bounds [0]; boundy = bounds [1]; api = this; // adjust the display size of the cropping box. setSelect ([width/2-60, height/2-60, width/2 + 60, height/2 + 60]); api. setOptions ({bgFade: true}); api. ui. selection. addClass ('jcrop-selection ') ;}// cropping display function showCoords (c) {if (parseInt (c. w)> 0) {var rx = 100/c. w; // adjust the display ratio here based on the aspect ratio of the cropping selection box. Same as var ry = 100/c. h; $ ("# preview" detail .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); $('#2 '). val (Math. round (c. y2); $ ('# W '). val (Math. round (c. w); $ ('# H '). val (Math. round (c. h ));};

 

3. the upload button style (swfupload) is rewritten to make the Click Event trigger region coincide with the upload button.

<Style type = "text/css">/* Pop-up layer upload button style */. swfupload {position: absolute; left: 80px; top: 16px}; </style>

 

4. After cropping and uploading is complete, the page clears the source image and displays the default basemap. The default basemap cannot be cropped.

// Image cropping upload 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>  </li>"); api. destroy (); $ (". prodact_ SC "). hide (); $ (". back_a "). hide (); // clear the image after cropping and uploading it $ ("# img "). attr ("src", ""); $ ("# preview "). attr ("src", "") ;}}) ;}else {alert ("Upload Logo ");}}