When working on a project,Often need something related to the membership system,Such as uploading and cropping avatars, etc.Let ’s share this content with everyone

It took me a while to integrate the avatar plugin yesterday.

1. First use ajaxfileupload plugin to do asynchronous upload.This place I wanted to make an upload progress effect,But limited technology failed.I also made a file size limit for the upload button,But due to browser compatibility issues,Imperfections There are still many problems to be solved between ie6--ie9

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

function getfilesize (filename) {
var bytesize=0;
//console.log($("#"+ filename) .val ());
if ($("#" + filename) [0] .files) {
var bytesize=$("#" + filename) [0] .files [0] .size;
} else {
// Because of browser compatibility issues, the size judgment logic has not been completed yet
// alert (bytesize);
bytesize=math.ceil (bytesize/1024) // kb
return bytesize;// kb

2. Button upload event binding

$("#btnupload"). click (function () {
var allowimgagetype=["jpg", "jpeg", "png", "gif"];
var file=$("#file1"). val ();
// Get size
var bytesize=getfilesize ("file1");
// Get the suffix
if (file.length>0) {
if (bytesize>2048) {
alert ("The uploaded attachment file cannot exceed 2m");
var pos=file.lastindexof (".");
// Truncate the string after the point
var ext=file.substring (pos + 1) .tolowercase ();
if ($. inarray (ext, allowimgagetype)!=-1) {
ajaxfileupload ();
} else {
alert ("Please select a jpg, jpeg, png, or gif type image");
else {
alert ("Please select a jpg, jpeg, png, or gif type image");

3. After uploading successfully, return to the picture path,And initialize the picture crop.Image cropping is directly requested to php using ajax

function ajaxfileupload () {
$.ajaxfileupload ({
url:"action.php", // Server-side request address for file upload
secureuri:false, // Generally set to false
fileelementid:"file1", // id attribute of the file upload space<input type="file" name="file" />
datatype:"json", // The return value type is generally set to json
success:function (data, status) // The server successfully responds to the processing function
// var json=eval ("(" + data + ")");
// alert (data);
$("#picture_original>img"). attr ({src:data.src, width:data.width, height:data.height});
$("#imgsrc"). val (data.path);
// Start crop operation at the same time,Trigger the crop box display,Let the user select the picture area
var cutter=new jquery.utrialavatarcutter ({
// Container id of 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} ],// Selector default size
selector:{width:200, height:200},showcoords:function (c) {// When the cropping frame changes,The upper left corner is relative to the x and y coordinates of the picture. Width and height
$("#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);
$("#div_avatar"). show ();
},error:function (data, status, e) // Server response failure handling 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.html file code is as follows

<p><input type="file" name="file1" /></p>
<input type="button" value="upload" />
<div><img src="" /></div>
<input type="hidden" name="x1" value="0" />
<input type="hidden" name="y1" value="0" />
<input type="hidden" name="cw" value="0" />
<input type="hidden" name="ch" value="0" />
<input type="hidden" name="imgsrc" />
<input type="button" value="crop upload" />

It's still rough now,There are still many things that need to be improved.If you are interested,Just use it.If you improve the function of the progress bar and file size,Remember to share it with me.

  • Previous Example of handling newline characters in json
  • Next Aegis Encryption and Decryption Tutorial (2) PHP Aegis Decryption