jquery Upload plugin uploadify + jcrop Several common tips for image clipping

One, limit upload size, image size

    $ (' #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 ':  ' Please select the gif jpeg jpg file ',          ' filetypeexts ':  ' *.gif;*.jpeg;*.jpg;*.png ',          ' sizeLimit ': 1000 * 1024,         ' height ':  19,         ' width ': 60,          ' buttonimage ':  '/images/senior.png ',         ' buttonText ':   ' upload image ',         ' onSelect ':  function (file)  {            if  (file.size > 5120 *  1024)  { //limit upload file size to 5M or less                 alert ("Upload size cannot exceed  5M  Oh ~");                $ (' #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 ("Picture size must be greater than 130*130");              $ (' #select '). Uploadify (' Cancel ');         }           } }, ' OnError '  : function  (event, queueid, fileobj)  {alert ("error!" +event); $ (' #uploadifyIndex '). Uploadify (' Cancel ');}     });

Two, cut the minimum width and height limit, crop the marquee shape and size limit.

Function jcropload () {var minwidth = 130 * t; //min. width: 130px;var minheight  = 130 * t; //min. High: 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 for square, 3/5 for rectangle, etc. minsize: [minwidth, minheight]          //  control the minimum cut size of the crop marquee     },     function ()  {var bounds = this.getbounds (); boundx = bounds[0];boundy =  bounds[1];api = this;//  Adjust the display size of the cropping marquee api.setselect ([Width / 2 - 60,  height / 2 - 60, width / 2 + 60, height / 2  + 60]); Api.setoptions ({    bgfade: true}); Api.ui.selection.addClass (' jcrop-selection ');     }); Crop display function showcoords (c)  {    if  (parseint (C.W)  > 0)   {        var rx = 100 / c.w;  // Adjust the display scale here according to the crop marquee width-height ratio.         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:  "-"  +&nbsP 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));};

Third, upload button style (swfupload) rewrite, let click event Trigger area and upload button coincide.

<style type= "TEXT/CSS" >/* pop-up layer upload button style */.swfupload{position:absolute;left:80px;top:16px};</style>

Iv. after the cropping upload is finished, the page clears the original image, displays the default Basemap, and the default basemap is not clipped.

Picture 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 ();//After the picture is cropped and uploaded, clear $ (" #img "). attr (" src ", " ");         $ ("#preview"). attr ("src",  "");         }    })     }else{alert ("Please upload logo");}} < Img src= "/images/no_logo_pic.jpg"  id= "Preview" onerror= "" http://blog.51cto.com/viewpic.php?refimg= "+ This.src= '/images/no_logo_pic.jpg '  />

This article is from the "Art Morning Blog" blog, please be sure to keep this source http://ycgit.blog.51cto.com/8590215/1707164

jquery Upload plugin uploadify + jcrop Several common tips for image clipping