本地圖片預覽，裁切，壓縮，Base64 / FormData / jQuery.form，異步上傳

最近在使用mui作一幾個頁面，須要拍照後上傳到服務器一些圖片。其中在上傳以前，可多選擇多張，能夠預覽，能夠縮放，能夠刪除，所以在這個過程當中也找了很多的知識點，也走了很多的彎路，寫在這裏，爲了分享與查詢。

此次分享的知識點：

1. FormData 爲二進制異步上傳方法，上傳的數據與文件是 1：1 的

2. Base64 爲二進制數據表示方法，文件越大，體積越大，可用在 canvas 裁切預覽，預覽本地圖片在瀏覽器上，不建議在上傳時使用。轉成base64以後，最大的好處就是能夠繪製到Canvas上，而後對圖片進行編輯！

3. jQuery.form 爲二進制異步上傳方法

若是在上傳前，圖片文件已經轉成 Base64 ，可是想要經過 FormData 上傳文件時，須要將 Base64 轉成 Blob 對象，最後將 Blob 對象 append 到 FormData 中，將FormData作爲參數上傳到服務器。因此有句話叫作：
既然都用FormData了，還轉個毛線base64啊！

下面分別介紹：

預覽功能：
http://www.jb51.net/article/4...
http://www.jb51.net/article/7...
https://www.oschina.net/code/...

• 獲取上傳前,存在瀏覽器中的圖片地址（或對象）

<input type="file">
input.on.('change', preview);
function preview(e) {
      // 獲取到input-file的文件對象
    var file = e.target.files[0];
    ...
}

• 瀏覽器緩存圖片的base64 [ window.URL.createObjectURL(file) ]

<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
// 結果： "blob:null/1342ae24-b5da-4ec3-b05d-f385387bd881"
window.URL.createObjectURL(document.getElementById('imgOne').files[0]);
//JS預覽圖像將本地圖片顯示到瀏覽器上
document.getElementById(' imgPre ').src=' blob:null/1342ae24-b5da-4ec3-b05d-f385387bd881 ';

• 實際上傳圖片的base64 [ new FileReader().readAsDataURL (file) ]

<input type="file" onchange="previewFile()"><br>
var reader = new FileReader();
reader.onloadend = function () {
   // Base64內容
   preview.src = reader.result;
}
reader.readAsDataURL( document.querySelector('input[type=file]').files[0] );

• 利用 canvas 在瀏覽器中實現預覽

var img = new Image();
img.onload = function () {
    // 當圖片寬度超過 400px 時, 就壓縮成 400px, 高度按比例計算
    // 壓縮質量能夠根據實際狀況調整
    var w = Math.min(400, img.width);
    var h = img.height * (w / img.width);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    // 設置 canvas 的寬度和高度
    canvas.width = w;
    canvas.height = h;
    // 把圖片繪製到 canvas 中
    ctx.drawImage(img, 0, 0, w, h);
    // 取出 base64 格式數據
    var dataURL = canvas.toDataURL('image/png');
    // ...
};
img.src = reader.result;

壓縮功能：
壓縮沒怎麼研究，從網上找的相對可用的資源，貼在這裏，方便查詢

• javascript - 在移動端怎樣上傳圖片？，並且在上傳前把圖片壓縮必定的大小？

https://segmentfault.com/q/10...

• 藉助插件 lrz.mobile.min.js

[lrz.bundle.js 前端圖片壓縮] think2011/localResizeIMG: 前端本地客戶端壓縮圖片，兼容IOS，Android，PC、自動按需加載文件

https://github.com/think2011/...

• 上傳前的圖片壓縮邏輯之一，就是在前端把base64轉成二級制數據，這個數據體積相比base64小不少，還能夠塞到formdata中提交

我在個人項目中有用到過，是由於圖片須要預覽，也須要上傳，整體感受不太好。

Base64異步提交

1. 利於canvas，實現圖處在線預覽

2. 利用new FileReader，實現圖片轉Base64

• 讀出 base64

function preview(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onloadend = function () {
        // 圖片的 base64 格式, 能夠直接當成 img 的 src 屬性值
        var dataURL = reader.result;
        var img = new Image();
        img.src = dataURL;
        // 插入到 DOM 中預覽
        // ...
    };
   
    // 讀出 base64
    reader.readAsDataURL(file);
}

• base64 轉 二進制文件，也就是base64 轉blob

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});
}

• blob對象是能夠經過 FormData 異步提交的

var imgaeBlob = dataURItoBlob(dataURI);
var formData = new FormData();
formData.apppend('images',imgaeBlob);

mui.ajax({
        type: "post",
        url: url,
        data: formData,
        cache: false,
        processData: false,
        contentType: 'enctype="multipart/form-data'
});

jQuery.form異步提交

• 使用jQuery.form插件，實現完美的表單異步提交

http://www.cnblogs.com/heyuqu...

• 兩種實現表單提交的方法

var options = {
    url: 'async_submit_test1.aspx?action=SaveUserInfo',
    type: 'post',
    dataType: 'text',
    data: $("#form1").serialize(),
    success: function (data) {
    if (data.length > 0)
        $("#responseText").text(data);
    }
};
$.ajax(options);

與

var options = {success: function (data) {$("#responseText").text(data);} };
// ajaxForm
$("#form1").ajaxForm(options);
// ajaxSubmit
$("#btnAjaxSubmit").click(function () {
    $("#form1").ajaxSubmit(options);
});

FormData異步提交：

1. post，提交時的 contentType，影響返回的數據的查看（我是這麼理解的）:

2. application/x-www-form-urlencoded （常見的）

3. multipart/form-data （圖片文件上傳時常設置）

4. 若是在提交的表單中除了圖片外還有其它類型的，必須分別 appentd 到 formData 中

application/x-www-form-urlencoded 這種格式最爲常見，平時使用的ajax提交就是這種方式。對應postman上的x-www-form-urlencoded選項，請求頭中Content-Type爲application/x-www-form-urlencoded;charset=utf-8，其中請求的數據被編碼爲key=value&key=value的形式（沒錯，相似瀏覽器地址欄中的get請求參數拼接方式），其具體值是編碼好的：

multipart/form-data 當表單提交內容中包含文件時（好比圖片文件），則須要這種數據格式。一般要設置表單enctype="multipart/form-data"：

若是有text的input，能夠這樣寫。若是有多個值，能夠屢次 append()：

var formData = new FormData();
      formData.append("images[]", fileBlob);
      formData.append('text',ticketDes);
      
                    $.ajax({
                        type: "post",
                        url: dd.baseUrl + '/save.html',
                        data: formData,
                        cache: false,
                        processData: false,
                        contentType: 'enctype="multipart/form-data',
                        sucess:function(data){}
                    });

網上找了一些相關的方法與demo:

• 使用FormData對象提交表單及上傳圖片

http://blog.csdn.net/fdipzone...

• FormData將圖片轉爲 base64 上傳

var fromData = new FormData();
fromData.append("base64", e.target.result);

• 經過FileReader獲取圖片的base64

http://www.cnblogs.com/simonb...

• FormData 自定義（二進制）上傳

var fd = new FormData();
var blob = dataURItoBlob(dataURL);
fd.append('file', blob);


dataURI 爲 base64 
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});
}

• 利用FileReader和FormData實現圖片預覽和上傳

http://www.tuicool.com/articl...

歡迎指點，指錯！謝謝！