第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下。
首先想到的是图片上传的问题。在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢。然后那时候也没有想到用jquery form插件。
后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以@R_599_404@url的一部分,我再来截取的方式。
方案一:iframe+form表单
502_10@
$(".turnUrl").val(window.location.pathname);
$("#uploadPic").on('change',function(event) {
event.preventDefault();
$("form").submit();
});
在需要上传图片的界面引入iframe,在调用公用库里的iframe方法,获得图片的url并且把图片显示在iframe中
img").show().attr("src",baseurl + "/" + filePath);
return "/" + filePath;
case "206":
$(el).contents().find(".tip").text('
文件过大');
break;
case "207":
$(el).contents().find(".tip").text('
文件类型
错误');
break;
case "208":
$(el).contents().find(".tip").text('系统
错误');
}
}
}
方案二:后来发现这样的做法有两个问题,一个是用户发的图片太大,后台没有做压缩(后台的同事太忙了,为了迁就他们,就我们前端做压缩了)。
第二个是,上传图片成功之后,图片显示在iframe上,这样需要一定的反应时间,使用者有时候会反映图片传不上去,其实只是后台还没有返回……
于是决定用base64上传到后台的方式
上传图片,大小在2M以内
(图片类型可为jpg,jepg,png,gif,bmp)
推荐图片比例为640*400
2097152){
alert("
上传图片请小于2M");
return false;
} if (!/image\/\w+/.test(file.type)) {
alert("
文件必须为
图片!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
createCanvas(this.result);
}
});
function createCanvas(src) {
var canvas = document.getElementById("uploadImg");
var cxt = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 400;
var img = new Image();
img.src = src;
img.onload = function() {
// var w=img.width;
// var h=img.height;
// canvas.width= w;
// canvas.height=h;
cxt.drawImage(img,640,400);
//cxt.drawImage(img,0);
$(".showPic").show().attr('src',canvas.toDataURL("image/jpeg",0.9));
$.ajax({
url: "/front/uploadByBase64.do",type: "POST",data: {
"imgStr": canvas.toDataURL("image/jpeg",0.9).split(',')[1]
},success: function(data) {
console.log(data);
$(".showPic").show().attr('data-url',"/"+ data.url);
}
});
}
}