昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果
1.先使用ajaxfileupload插件做异步上传。这个地方我本来想做个上传进度的效果，但技术有限失败了。上传按钮我还做了一个文件大小的限制，但是由于浏览器兼容性的问题，不完美在IE6–IE9之间还有很多问题需要解决
getFileSize函数是用于判断文件大小的函数
function getFileSize(fileName) {<BR> var byteSize = 0;<BR> //console.log($("#" + fileName).val());<BR> if($("#" + fileName)[0].files) {<BR> var byteSize = $("#" + fileName)[0].files[0].size;<BR> }else {<BR> //此处由于有浏览器兼容问题 还没完成大小判断的逻辑<BR> }<BR> //alert(byteSize);<BR> byteSize = Math.ceil(byteSize / 1024) //KB<BR> return byteSize;//KB<BR> }<BR>
2.按钮上传事件绑定
$("#btnUpload").click(function () {<BR> var allowImgageType = ['jpg', 'jpeg', 'png', 'gif'];<BR> var file = $("#file1").val();<BR> //获取大小<BR> var byteSize = getFileSize('file1');<BR> //获取后缀<BR> if (file.length > 0) {<BR> if(byteSize > 2048) {<BR> alert("上传的附件文件不能超过2M");<BR> return;<BR> }<BR> var pos = file.lastIndexOf(".");<BR> //截取点之后的字符串<BR> var ext = file.substring(pos + 1).toLowerCase();<BR> //console.log(ext);<BR> if($.inArray(ext, allowImgageType) != -1) {<BR> ajaxFileUpload();<BR> }else {<BR> alert("请选择jpg,jpeg,png,gif类型的图片");<BR> }<BR> }<BR> else {<BR> alert("请选择jpg,jpeg,png,gif类型的图片");<BR> }<BR> });<BR>
3.在上传成功后返回图片路径，并初始化图片裁剪。图片裁剪就直接用ajax请求到php
function ajaxFileUpload() {<BR> $.ajaxFileUpload({<BR> url: 'action.php', //用于文件上传的服务器端请求地址<BR> secureuri: false, //一般设置为false<BR> fileElementId: 'file1', //文件上传空间的id属性 <BR> dataType: 'json', //返回值类型 一般设置为json<BR> success: function (data, status) //服务器成功响应处理函数<BR> {<BR> //var json = eval('(' + data + ')');<BR> //alert(data);<BR> $("#picture_original>img").attr({src: data.src, width: data.width, height: data.height});<BR> $('#imgsrc').val(data.path);<BR> //alert(data.msg);</P><P> //同时启动裁剪操作，触发裁剪框显示，让用户选择图片区域<BR> var cutter = new jQuery.UtrialAvatarCutter({<BR> //主图片所在容器ID<BR> <em style="color:transparent">本文来源[email protected]搞@^&代*@码)网9</em><strong>搞代gaodaima码</strong> content : "picture_original",<BR> //缩略图配置,ID:所在容器ID;width,height:缩略图大小<BR> purviews : [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}],<BR> //选择器默认大小<BR> selector : {width:200,height:200},<BR> showCoords : function(c) { //当裁剪框变动时，将左上角相对图片的X坐标与Y坐标 宽度以及高度<BR> $("#x1").val(c.x);<BR> $("#y1").val(c.y);<BR> $("#cw").val(c.w);<BR> $("#ch").val(c.h);<BR> },<BR> cropattrs : {boxWidth: 500, boxHeight: 500}<BR> }<BR> );<BR> cutter.reload(data.src);<BR> $('#div_avatar').show();<BR> },<BR> error: function (data, status, e)//服务器响应失败处理函数<BR> {<BR> alert(e);<BR> }<BR> })<BR> return false;<BR> }<br><br> $('#btnCrop').click(function() {<BR> $.getJSON('action2.php', {x: $('#x1').val(), y: $('#y1').val(), w: $('#cw').val(), h: $('#ch').val(), src: $('#imgsrc').val()}, function(data) {<BR> alert(data.msg);<BR> });<BR> return false;<BR> });<BR>
4.HTML文件代码如下
<body><BR> <BR> <BR> <div style="overflow:hidden" id="div_avatar"><BR> <div style="width:500px;height:500px;overflow:hidden;float:left" id="picture_original">
