Home > Article > Backend Development > PHP+ajaxfileupload+jcrop plug-in perfectly realizes avatar upload and cropping_PHP tutorial
I spent some time yesterday integrating the avatar plug-in. I pieced together the results. Let’s take a look at the effect first
1. First use the ajaxfileupload plug-in to do asynchronous upload. I originally wanted to create an upload progress effect here, but the technology was limited and failed. I also set a file size limit for the upload button, but due to browser compatibility issues, it is not perfect and there are still many problems that need to be solved between IE6--IE9
The getFileSize function is a function used to determine the file size
//Container ID of the main picture
,
// Thumbnail configuration, ID: container ID; width, height: thumbnail size
,height:200},{id:"picture_50 ",width:50,height:50},{id:"picture_30",width:30,height:30}],
: {width:200,height:200 },
.val(c.x);
through > ();
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文件代码如下
现在还很粗糙,功能还有很多需要完善的地方。大家有兴趣的话,就拿去使用吧。如果完善了进度条和文件大小的功能,记得也分享给我一份哦。
附上源码 http://www.jb51.net/codes/174384.html