欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

項目實踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)

 更新時間:2016年07月28日 13:57:34   作者:五木十架  
這篇文章主要介紹了項目實踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮)的相關(guān)資料,需要的朋友可以參考下

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

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

后臺的同事給的方案是用iframe里寫一個form表單,然后上傳圖片之后自動提交表單,他將圖片在服務(wù)器上的地址以跳轉(zhuǎn)頁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,在調(diào)用公用庫里的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('系統(tǒng)錯誤');
}
}
}

方案二:后來發(fā)現(xiàn)這樣的做法有兩個問題,一個是用戶發(fā)的圖片太大,后臺沒有做壓縮(后臺的同事太忙了,為了遷就他們,就我們前端做壓縮了)。

第二個是,上傳圖片成功之后,圖片顯示在iframe上,這樣需要一定的反應(yīng)時間,使用者有時候會反映圖片傳不上去,其實只是后臺還沒有返回……

于是決定用base64上傳到后臺的方式

<input type="file" id="uploadPic" name="file">
<label for="uploadPic" id="fileBtn">
+
<img class="showPic" src="" />
</label>
<span class="tip">請上傳圖片,大小在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)和原來差不多,只是多了一個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數(shù)據(jù)

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

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

5.再將后臺返回的url 綁在圖片的data-url屬性上,在ajax上交整個表單時獲取這個data-url就好了,這樣用戶可以最快時間看到,而url其實還在ajax到后臺的過程中

后記:這兩個方案都有一個問題,會給后臺上傳很多冗余圖片。不過后臺的同事貌似沒什么意見,囧。

實際效果是這樣的 http://www.qqchou.org/qqcweb/pages/photoIframe.html

以上所述是小編給大家介紹的項目實踐一圖片上傳之form表單還是base64前端圖片壓縮(前端圖片壓縮),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 詳解JavaScript狀態(tài)容器Redux

    詳解JavaScript狀態(tài)容器Redux

    Redux官網(wǎng)上是這樣描述Redux,Redux is a predictable state container for JavaScript apps.(Redux是JavaScript狀態(tài)容器,提供可預(yù)測性的狀態(tài)管理)。目前Redux GitHub有5w多star,足以說明 Redux 受歡迎的程度
    2021-06-06
  • 微信小程序h5頁面跳轉(zhuǎn)小程序的超詳細講解

    微信小程序h5頁面跳轉(zhuǎn)小程序的超詳細講解

    開發(fā)中涉及到一個需求,就是從一個預(yù)約票購買的頁面需要跳轉(zhuǎn)到?小程序,下面這篇文章主要給大家介紹了關(guān)于微信小程序h5頁面跳轉(zhuǎn)小程序的超詳細講解,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • 15分鐘深入了解JS繼承分類、原理與用法

    15分鐘深入了解JS繼承分類、原理與用法

    這篇文章主要介紹了JS繼承分類、原理與用法,結(jié)合實例形式較為詳細的總結(jié)分析了javascript原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承和寄生組合式繼承等相關(guān)原理及使用方法,需要的朋友可以參考下
    2019-01-01
  • JS如何判斷對象是否包含某個屬性

    JS如何判斷對象是否包含某個屬性

    這篇文章主要介紹了JS如何判斷對象是否包含某個屬性,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-08-08
  • onclick與listeners的執(zhí)行先后問題詳細解剖

    onclick與listeners的執(zhí)行先后問題詳細解剖

    javascript中onclick與listeners的執(zhí)行先后問題一直都是大家所疑惑的地方,接下來將為大家解決此疑惑,感興趣的朋友可以了解下哦
    2013-01-01
  • input輸入框限制只能輸入數(shù)字的方法實例(個人認為最好的)

    input輸入框限制只能輸入數(shù)字的方法實例(個人認為最好的)

    在很多業(yè)務(wù)中需要對輸入框進行字符限制,比如金額輸入框、手機號碼輸入框等,下面這篇文章主要給大家介紹了關(guān)于input輸入框限制只能輸入數(shù)字的相關(guān)資料,文中介紹的方法個人認為最好的,需要的朋友可以參考下
    2022-10-10
  • 原生js操作checkbox用document.getElementById實現(xiàn)

    原生js操作checkbox用document.getElementById實現(xiàn)

    js操作checkbox本人建議用document.getElementById(checkbox_id).checked不推薦使用jquery操作checkbox,感興趣的朋友不要錯過
    2013-10-10
  • 微信小程序dom操作的替代思路實例分析

    微信小程序dom操作的替代思路實例分析

    這篇文章主要介紹了微信小程序dom操作的替代思路,結(jié)合實例形式分析了微信小程序通過事件響應(yīng)、動態(tài)操作元素屬性來實現(xiàn)dom操作效果,需要的朋友可以參考下
    2018-12-12
  • 輕松實現(xiàn)js選項卡切換效果

    輕松實現(xiàn)js選項卡切換效果

    這篇文章主要幫助大家輕松實現(xiàn)js選項卡切換效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)

    js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)

    下面小編就為大家?guī)硪黄猨s遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04

最新評論