第一個(gè)項(xiàng)目終于上線了，是一個(gè)叫親青籌的公益眾籌平臺(tái)，微信端，電腦端還有后臺(tái)界面大部分都是我完成的，幾個(gè)月過(guò)來(lái)，感覺(jué)收獲了很多，覺(jué)得要總結(jié)一下。

首先想到的是圖片上傳的問(wèn)題。在通常表單數(shù)據(jù)都是ajax上傳的情況下，為了上傳圖片而去使用form表單感覺(jué)很蠢。然后那時(shí)候也沒(méi)有想到用jquery form插件。

后臺(tái)的同事給的方案是用iframe里寫一個(gè)form表單，然后上傳圖片之后自動(dòng)提交表單，他將圖片在服務(wù)器上的地址以跳轉(zhuǎn)頁(yè)url的一部分，我再來(lái)截取的方式。

方案一：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，在調(diào)用公用庫(kù)里的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('文件過(guò)大');break;case "207":$(el).contents().find(".tip").text('文件類型錯(cuò)誤');break;case "208":$(el).contents().find(".tip").text('系統(tǒng)錯(cuò)誤');}} }

方案二：后來(lái)發(fā)現(xiàn)這樣的做法有兩個(gè)問(wèn)題，一個(gè)是用戶發(fā)的圖片太大，后臺(tái)沒(méi)有做壓縮（后臺(tái)的同事太忙了，為了遷就他們，就我們前端做壓縮了）。第二個(gè)是，上傳圖片成功之后，圖片顯示在iframe上，這樣需要一定的反應(yīng)時(shí)間，使用者有時(shí)候會(huì)反映圖片傳不上去，其實(shí)只是后臺(tái)還沒(méi)有返回……

于是決定用base64上傳到后臺(tái)的方式

<input type="file" id="uploadPic" name="file"><label for="uploadPic" id="fileBtn">+<img class="showPic" src="" /></label><span class="tip">請(qǐng)上傳圖片，大小在2M以內(nèi)<br/>(圖片類型可為jpg,jepg,png,gif,bmp)<br/>推薦圖片比例為640*400</span><input type="text" name="turnUrl" class="turnUrl"><canvas id="uploadImg" style="display:none"></canvas>

結(jié)構(gòu)和原來(lái)差不多，只是多了一個(gè)canvas

$("#uploadPic").on('change', function(event) {event.preventDefault();console.log($(this)[0].files);var file = $(this)[0].files[0];if(file.size>2097152){alert("上傳圖片請(qǐng)小于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.再通過(guò)html5的FileReader接口來(lái)獲得這個(gè)圖片的base64數(shù)據(jù)

3.將這個(gè)base64傳入canvas中，作為一張圖的src,這時(shí)候可以設(shè)置圖片的分辨率大小，保證上傳的圖都是統(tǒng)一的分辨率。當(dāng)然也可以按照?qǐng)D片原來(lái)的大小。

4.在ajax之前，把處理后的base64直接顯示出來(lái)（這樣用戶就可以立刻看到自己上傳的圖片），再將?canvas.toDataURL("image/jpeg", 0.9).split(',')[1] （類型為image/jpeg，就可以用第二個(gè)參數(shù)來(lái)設(shè)置畫質(zhì)了）傳到后臺(tái)對(duì)應(yīng)的接口

5.再將后臺(tái)返回的url 綁在圖片的data-url屬性上，在ajax上交整個(gè)表單時(shí)獲取這個(gè)data-url就好了，這樣用戶可以最快時(shí)間看到，而url其實(shí)還在ajax到后臺(tái)的過(guò)程中

后記：這兩個(gè)方案都有一個(gè)問(wèn)題，會(huì)給后臺(tái)上傳很多冗余圖片。不過(guò)后臺(tái)的同事貌似沒(méi)什么意見(jiàn)，囧。

實(shí)際效果是這樣的?http://www.qqchou.org/qqcweb/pages/photoIframe.html?

?

轉(zhuǎn)載于:https://www.cnblogs.com/wzls/p/5714273.html

總結(jié)

以上是生活随笔為你收集整理的项目回顾1-图片上传-form表单还是base64-前端图片压缩的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。