jquery 上传头像裁剪插件

JQuery上传头像裁剪插件是一款非常实用的工具，可以帮助用户方便快捷地上传头像，并进行裁剪处理。以下是介绍如何使用JQuery上传头像裁剪插件的详细步骤。

第一步：引入JQuery上传头像裁剪插件的JS库和CSS样式。方法如下：

<link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.Jcrop.min.js"></script>

第二步：添加用于展示头像的HTML标签，插件会在此基础上进行操作。方法如下：

<div class="col-md-4">
    <img id="avatar" src="avatar.png" style="max-width:100%;" />
</div>

第三步：绑定JQuery上传头像裁剪插件的JS代码，方法如下：

$(function(){
    $('#avatar').Jcrop({
        aspectRatio: 1,
        onSelect: updateCoords
    });
});

function updateCoords(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

第四步：添加用于提交裁剪后的头像的表单。方法如下：

<form action="upload.php" method="post">
    <input type="hidden" id="x" name="x" />
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <input type="submit" value="保存" />
</form>

最后，提交表单后就可以将裁剪后的头像保存到服务器中了。