Php+ajaxfileupload and Jcrop plug-in combination complete avatar upload

It took a little time yesterday to integrate the Avatar plugin patchwork results First look at the effect

1. Use the Ajaxfileupload plugin to do asynchronous uploads first. This place I wanted to make an upload progress effect, but the technology is limited failure. Upload button I also made a file size limit, but due to browser compatibility problems, imperfect between ie6--ie9 there are still a lot of problems to be solved

The getfilesize function is a function used to determine the size of a file

functionGetFileSize (fileName) {varByteSize = 0; //Console.log ($ ("#" + FileName). Val ());                if($ ("#" + fileName) [0].files) {varByteSize = $ ("#" + fileName) [0].files[0].size; }Else {    //the logic of size judgment is not completed here because of browser compatibility issues                }                //alert (bytesize);ByteSize = Math.ceil (bytesize/1024)//KB                returnByteSize;//KB}

2. Button Upload Event bindings

$ ("#btnUpload"). Click (function () {                varAllowimgagetype = [' jpg ', ' jpeg ', ' png ', ' gif ']; varFile = $ ("#file1"). Val (); //Get Size                varByteSize = GetFileSize (' file1 ')); //get suffix                if(File.length > 0) {                    if(ByteSize > 2048) {alert ("Upload attachment file cannot exceed 2M"); return; }                    varpos = File.lastindexof (".")); //the string after the Intercept point                    varext = file.substring (pos + 1). toLowerCase (); //Console.log (EXT);                    if($.inarray (ext, allowimgagetype)! =-1) {ajaxfileupload (); }Else{alert ("Please select a picture of jpg,jpeg,png,gif type"); }                }                Else{alert ("Please select a picture of jpg,jpeg,png,gif type"); }            });

3. After the upload is successful, return to the picture path and initialize the picture clipping. Picture clipping is directly using AJAX to request to PHP

functionajaxfileupload () {$.ajaxfileupload ({URL:' Action.php ',//server-side request address for file uploadsSecureuri:false,//generally set to falseFileelementid: ' File1 ',//file upload Space id attribute <input type= "file" id= "file" name= "file"/>DataType: ' JSON ',//The return value type is generally set to JSONSuccessfunction(data, status)//Server Success Response handler function                    {                        //var json = eval (' (' + data + ') ');                        //alert (data);$ ("#picture_original >img"). attr ({src:data.src, width:data.width, height:data.height}); $(' #imgsrc '). Val (Data.path); //alert (data.msg);                        //at the same time start the cropping operation, trigger the crop box display, let the user select the picture area                        varCutter =NewJquery.utrialavatarcutter ({//The container ID where the main picture is locatedContent: "Picture_original",                                //thumbnail configuration, ID: Container id;width,height: Thumbnail sizePurviews: [{ID: "picture_200", Width:200,height:200},{id: "Picture_50", Width:50,height:50},{id: "picture_30", Width : 30,height:30}],                                //selector Default SizeSelector: {width:200,height:200}, Showcoords:function(c) {//When the crop box changes, the upper-left corner relative to the picture's x-coordinate and the y-coordinate width and height$ ("#x1"). Val (c.x); $("#y1"). Val (C.Y); $("#cw"). Val (C.W); $("#ch"). Val (c.h); }, Cropattrs: {boxwidth:BOXHEIGHT:500,}                            }                        );                        Cutter.reload (DATA.SRC); $(' #div_avatar '). Show (); }, Error:function(data, status, E)//Server Response Failure handler function{alert (e); }                })                return false; }                        $(' #btnCrop '). Click (function() {$.getjson (' action2.php ', {x: $ (' #x1 '). Val (), Y: $ (' #y1 '). Val (), W: $ (' #cw '). Val (), H: $ (' #ch '). Val (), SRC: $ (' #imgsrc '). Val ()},function(data) {alert (data.msg);                }); return false; });

The 4.HTML file code is as follows

<Body>    <P><inputtype= "File"ID= "File1"name= "File1" /></P>    <inputtype= "button"value= "Upload"ID= "Btnupload"/>    <Divstyle= "Display:none;overflow:hidden"ID= "Div_avatar">        <Divstyle= "Width:500px;height:500px;overflow:hidden;float:left;"ID= "Picture_original"><imgalt=""src="" /></Div>        <DivID= "picture_200"style= "float:left;margin-left:20px"></Div>        <DivID= "Picture_50"style= "float:left;margin-left:20px"></Div>        <DivID= "Picture_30"style= "float:left;margin-left:20px"></Div>        <inputtype= "hidden"ID= "x1"name= "x1"value= "0" />        <inputtype= "hidden"ID= "Y1"name= "Y1"value= "0" />        <inputtype= "hidden"ID= "CW"name= "CW"value= "0" />        <inputtype= "hidden"ID= "ch"name= "ch"value= "0" />        <inputtype= "hidden"ID= "Imgsrc"name= "Imgsrc" />        <inputtype= "button"value= "Crop upload"ID= "Btncrop"/>    </Div></Body>

It's still rough, and there's a lot more to be perfected. If you are interested, take it. If you complete the progress bar and file size of the function, remember also share to me a copy OH. The source is below.

Avatar.rar

You can also download http://download.csdn.net/download/loneleaf1/7466043 at this address.