PHP + ajaxfileupload + jcrop plug-in perfectly achieves avatar upload and tailoring

Some content related to the member system is often required during Project creation, such as the upload and cropping of the avatar. the following content is shared with Ajax.

Yesterday, I spent some time integrating the Avatar plug-in's results. let's take a look at the results first.

1. use the ajaxfileupload plug-in for asynchronous Upload. In this case, I originally wanted to make an upload progress, but the technology was limited and failed. Upload button I also made a file size limit, but due to browser compatibility issues, not perfect there are still a lot of problems to solve between the IE6--IE9

The getFileSize function is a function used to determine the file size.

The code is as follows:
Function getFileSize (fileName ){
Var byteSize = 0;
// Console. log ($ ("#" + fileName). val ());
If ($ ("#" + fileName) [0]. files ){
Var byteSize = $ ("#" + fileName) [0]. files [0]. size;
} Else {
// The logic for determining the size is not completed due to browser compatibility issues.
}
// Alert (byteSize );
ByteSize = Math. ceil (byteSize/1024) // KB
Return byteSize; // KB
}

2. bind a button Upload event

The code is as follows:
$ ("# BtnUpload"). click (function (){
Var allowImgageType = ['jpg ', 'jpeg', 'PNG ', 'GIF'];
Var file = $ ("# file1"). val ();
// Obtain the size
Var byteSize = getFileSize ('file1 ');
// Obtain the suffix
If (file. length> 0 ){
If (byteSize & gt; 2048 ){
Alert ("the uploaded attachment file cannot exceed 2 MB ");
Return;
}
Var pos = file. lastIndexOf (".");
// Extract the string after the vertex
Var ext = file. substring (pos + 1). toLowerCase ();
// Console. log (ext );
If ($. inArray (ext, allowImgageType )! =-1 ){
AjaxFileUpload ();
} Else {
Alert ("Select jpg, jpeg, png, and gif images ");
}
}
Else {
Alert ("Select jpg, jpeg, png, and gif images ");
}
});

3. after the upload is successful, return the image path and initialize Image cropping. Crop Images and request them to php using ajax.

The code is as follows:
Function ajaxFileUpload (){
$. AjaxFileUpload ({
Url: 'Action. php', // server-side request address used for file Upload
Secureuri: false, // this parameter is generally set to false.
FileElementId: 'file1', // id attribute of the file upload space
DataType: 'json', // The return value type is generally set to json
Success: function (data, status) // The server responds to the processing function successfully.
{
// 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 );

// Start the cropping operation at the same time to trigger the display of the cropping box so that the user can select the image area.
Var cutter = new jQuery. UtrialAvatarCutter ({
// Container ID of the main image
Content: "picture_original ",
// Thumbnail configuration, ID: Container ID; width, height: thumbnail size
Purviews: [{id: "picture_200", width: 200, height: 200}, {id: "picture_50", width: 50, height: 50}, {id: "picture_30", width: 30, height: 30}],
// Default selector size
Selector: {width: 200, height: 200 },
ShowCoords: function (c) {// when the cropping box changes, convert the X coordinate of the upper left corner to the Y coordinate width and height of the image.
$ ("# X1"). val (c. x );
$ ("# Y1"). val (c. y );
$ ("# Cw"). val (c. w );
$ ("# Ch"). val (c. h );
},
Cropattrs: {boxWidth: 500, boxHeight: 500}
}
);
Cutter. reload (data. src );
$ ('# P_avatar'). show ();
},
Error: function (data, status, e) // server response failure processing 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;
});

4. the HTML file code is as follows:

The code is as follows:

It is still rough, and there are still many things to be improved. If you are interested, use it. If you have completed the progress bar and file size functions, share them with me.

Attachment source code http://www.bitsCN.com/codes/174384.html