PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

在进行项目工作时，经常需要处理会员系统的相关内容，比如头像的上传与裁剪等。最近，狼蚁网站的SEO优化团队对头像插件进行了一次整合，并分享了一些经验和成果。

让我们来看看实现的效果。在头像上传方面，采用了ajaxFileUpload插件进行异步上传。虽然原本打算添加上传进度的功能，但由于技术限制未能实现。上传按钮已经设置了文件大小的限制。但由于浏览器兼容性的问题，特别是在IE6到IE9之间，还存在一些需要解决的问题。

为了判断文件的大小，使用了一个名为getFileSize的函数。该函数通过获取文件对象的大小，并将其转换为KB单位后返回。具体的代码如下所示：

接下来是按钮上传事件的绑定。当点击上传按钮时，会执行一系列的操作。定义了允许上传的图片类型（jpg、jpeg、png、gif）。然后，通过getFileSize函数获取文件的大小，并检查文件的后缀名是否允许。如果文件大小和类型都符合要求，就会执行ajaxFileUpload函数进行上传。否则，会弹出提示信息要求选择正确的图片类型和大小。具体的代码如下所示：

当图片上传成功后，会返回图片的路径，并初始化图片裁剪功能。这样，用户就可以对自己的头像进行裁剪和编辑了。

图片裁剪，轻松实现一键上传——利用AJAX与PHP的完美融合

在这个数字化时代，图片裁剪并上传已经成为我们日常生活中的一部分。今天，我们将一起如何使用AJAX和PHP实现这一功能，让你的用户体验更加流畅。

让我们来看一下JavaScript部分的代码。通过AJAX技术，我们可以实现文件的异步上传，无需刷新页面即可与服务器进行交互。在这里，我们使用了`$.ajaxFileUpload`方法来上传文件。

```javascript

function ajaxFileUpload() {

$.ajaxFileUpload({

url: 'action.php', //服务器端接收文件的地址

secureuri: false, //这里一般设置为false

fileElementId: 'file1', //需要上传的文件的input元素的id

dataType: 'json', //服务器返回的数据格式

success: function (data, status) {

//服务器成功响应后的处理函数

$("picture_original img").attr({src: data.src, width: data.width, height: data.height});

$('imgsrc').val(data.path);

//启动裁剪操作，触发裁剪框显示，让用户选择图片区域

var cutter = new jQuery.UtrialAvatarCutter({

content: "picture_original", //主图片所在容器ID

purviews: [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}], //缩略图配置

selector: {width:200,height:200}, //选择器默认大小

showCoords: function(c) {

//当裁剪框变动时，更新相关隐藏域的值

$("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) {

//服务器响应失败处理函数

alert(e);

}

});

return false;

}

```

接下来，我们看一下HTML部分。用户可以通过文件输入选择需要上传的图片，通过按钮触发上传操作。我们还提供了裁剪功能，并设置了相关的隐藏域来存储裁剪参数。

```html

```

===============================

亲爱的开发者朋友们，你们好！在此，我们荣幸地分享一段源码，并期待你们的参与和宝贵意见。这个源码充满了潜力，等待你们来发掘和完善。

一、全新体验：生动、丰富的功能等你来体验

在这段源码中，我们设计了一个充满活力和丰富功能的程序，旨在为用户提供前所未有的体验。无论是炫酷的进度条，还是智能的文件大小管理，都体现了我们的精心设计。我们希望通过这些功能，让用户感受到科技的魅力和便捷。

二、深入的完善邀请

我们诚挚地邀请各位开发者朋友，一起来完善和优化这段代码。如果你有任何想法和建议，或者发现了任何潜在的问题和bug，都请毫不犹豫地告诉我们。你的每一个想法和行动，都将对这段代码的发展产生深远影响。

三、源码分享：共享智慧，共创未来

-

我们深知，源码是智慧的结晶，也是创新的源泉。我们决定将这段源码分享给你们，希望能激发更多的创新和灵感。你可以根据自己的需求和想法，对这段代码进行修改和优化，甚至可以开发出全新的功能。

四、携手共进，共创辉煌

我们期待与你们携手共进，共同完善和发展这段代码。如果你对进度条或文件大小功能有任何新的想法或建议，记得与我们分享。让我们一起努力，将这段代码打造成一款优秀的产品，为用户带来更好的体验。

让我们共同见证这段源码的蜕变和成长，感受科技带来的无限可能。大家有兴趣的话，就拿去使用吧，期待你们的参与和贡献！

Cambrian.render('body')