第一個項目終於上線了，是一個叫親青籌的公益眾籌平台，微信端，電腦端還有後台界面大部分都是我完成的，幾個月過來，感覺收獲了很多，覺得要總結一下。
首先想到的是圖片上傳的問題。在通常表單數據都是ajax上傳的情況下，為了上傳圖片而去使用form表單感覺很蠢。然後那時候也沒有想到用jquery form插件。
後台的同事給的方案是用iframe裡寫一個form表單，然後上傳圖片之後自動提交表單，他將圖片在服務器上的地址以跳轉頁url的一部分，我再來截取的方式。
方案一：iframe+form表單
<form action="/user/uploadIdCard.do" class="fileForm picUpload" enctype="multipart/form-data" method="post">
<input type="file" id="uploadPic" name="file">
<label for="uploadPic" id="fileBtn">
+
<img src="" />
</label>
<input type="text" name="turnUrl" class="turnUrl">
</form>
$(".turnUrl").val(window.location.pathname);
$("#uploadPic").on('change', function(event) {
event.preventDefault();
$("form").submit();
});
在需要上傳圖片的界面引入iframe，在調用公用庫裡的iframe方法，獲得圖片的url並且把圖片顯示在iframe中
// 提取iframe裡的路徑
function iframe(el) {
var baseurl = "";
var code, filePath;
var place = $(el)[0].contentWindow.location.search;
console.log(place);
if (place) {
code = place.match(/code=\d+/)[0].substr(5);
if (place.match(/filepath=\S+/)) {
filePath = place.match(/filepath=\S+/)[0].substr(9);
}
$(el).contents().find(".tip").css('color', '#d0021b');
console.log(filePath);
switch (code) {
case "200":
$(el).contents().find(".tip").text('上傳成功');
$(el).contents().find(".tip").css('color', '#55a012');
$(el).contents().find("#fileBtn>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上傳到後台的方式
<input type="file" id="uploadPic" name="file"> <label for="uploadPic" id="fileBtn"> + <img class="showPic" src="" /> </label> <span class="tip">請上傳圖片，大小在2M以內<br/>(圖片類型可為jpg,jepg,png,gif,bmp)<br/>推薦圖片比例為640*400</span> <input type="text" name="turnUrl" class="turnUrl"> <canvas id="uploadImg" style="display:none"></canvas>
結構和原來差不多，只是多了一個canvas
$("#uploadPic").on('change', function(event) {
event.preventDefault();
console.log($(this)[0].files);
var file = $(this)[0].files[0];
if(file.size>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, 0, 0,640,400);
//cxt.drawImage(img, 0, 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);
}
});
}
}
1.首先是用的input的file文件的信息，判斷文件大小file.size，以及文件是否為圖片file.type
2.再通過html5的FileReader接口來獲得這個圖片的base64數據
3.將這個base64傳入canvas中，作為一張圖的src,這時候可以設置圖片的分辨率大小，保證上傳的圖都是統一的分辨率。當然也可以按照圖片原來的大小。
4.在ajax之前，把處理後的base64直接顯示出來（這樣用戶就可以立刻看到自己上傳的圖片），再將 canvas.toDataURL("image/jpeg", 0.9).split(',')[1] （類型為image/jpeg，就可以用第二個參數來設置畫質了）傳到後台對應的接口
5.再將後台返回的url 綁在圖片的data-url屬性上，在ajax上交整個表單時獲取這個data-url就好了，這樣用戶可以最快時間看到，而url其實還在ajax到後台的過程中
後記：這兩個方案都有一個問題，會給後台上傳很多冗余圖片。不過後台的同事貌似沒什麼意見，囧。
實際效果是這樣的 http://www.qqchou.org/qqcweb/pages/photoIframe.html
以上所述是小編給大家介紹的項目實踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！