<!--存放頁(yè)面內(nèi)容的dom節(jié)點(diǎn)-->
<div class="weui-cell__bd weui-uploader__bd">
    <ul class="weui-uploader__files" id="uploaderFiles">                
    <!--圖片存放區(qū)域--> 
    </ul>
    <!--上傳按鈕-->
    <div class="weui-uploader__input-box">
        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
    </div>
</div>

// 圖片數(shù)組 以下為具體的功能實(shí)現(xiàn)js

 var imgarr=[];

 // 點(diǎn)擊添加圖片

 $("#uploaderInput").on("change",function () {
 //獲取所選圖片的列表對(duì)象
    var fileimg=this.files; 
 //查看已經(jīng)選擇的圖片數(shù)量
    var arrnum=imgarr.length;
 //獲取所有圖片的數(shù)量
    var num=arrnum+fileimg.length;
//我們這里是限制了三張
    if(num>3){
     //該處借用了layerjs的彈出層模塊
        layer.msg("最多上傳三張圖片");

        return false;

    }
//循環(huán)取出本次選擇的圖片
    for(var i =0;i<fileimg.length;i++){    

        /*圖片轉(zhuǎn)Base64 核心代碼*/  

        var file = fileimg[i];  

        //這里我們判斷下類型如果不是圖片就返回中斷上傳，也可以continue直接過(guò)濾掉該文件
        if (!/image\/\w+/.test(file.type)) {  
            layer.msg("請(qǐng)確保文件為圖像類型");  
            return false;  
        }  
        //創(chuàng)建一個(gè)文件讀取的工具類
        var reader = new FileReader(); 
        //這里利用了閉包的特性，來(lái)保留文件名
        (function(x){
                reader.onload = function (e) {
                //將讀取到圖片流直接拼接起來(lái)
                var str='<li class="weui-uploader__file " style="background-image:url('+this.result+')"><span class="remove" style="color:red">X</span></li>';
                //塞到頁(yè)面節(jié)點(diǎn)里                    
                $("#uploaderFiles").append(str);
                //調(diào)用壓縮文件的方法夷陋，具體實(shí)現(xiàn)邏輯見(jiàn)下面
                render(this.result,x);
                }  

        })(file.name) 
       //告訴文件讀取工具類讀取那個(gè)文件
        reader.readAsDataURL(file);  
    }
 })  

//設(shè)置壓縮圖片的最大高度
     var MAX_HEIGHT = 1000;
function render(src,picname) {
    // 創(chuàng)建一個(gè) Image 對(duì)象
    var image = new Image();
    // 綁定 load 事件處理器泛豪，加載完成后執(zhí)行
    image.onload = function() {
        // 獲取 canvas DOM 對(duì)象
        var canvas = document.createElement("canvas");
        // 如果高度超標(biāo)
        if (image.height > MAX_HEIGHT && image.height >= image.width) {
            // 寬度等比例縮放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
       //考錄到用戶上傳的有可能是橫屏圖片同樣過(guò)濾下寬度的圖片寄雀。
        if (image.width > MAX_HEIGHT && image.width > image.height) {
            // 寬度等比例縮放 *=
            image.height *= MAX_HEIGHT / image.width;
            image.width = MAX_HEIGHT;
        }

        // 獲取 canvas的 2d 畫布對(duì)象,
        var ctx = canvas.getContext("2d");
        // canvas清屏莱坎，并設(shè)置為上面寬高
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 重置canvas寬高
        canvas.width = image.width;
        canvas.height = image.height;
        // 將圖像繪制到canvas上
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // !!! 注意玫氢，image 沒(méi)有加入到 dom之中
//        document.getElementById('img').src = canvas.toDataURL("image/png");
        var blob = canvas.toDataURL("image/jpeg");
//將轉(zhuǎn)換結(jié)果放在要上傳的圖片數(shù)組里
        imgarr.push({"pic":blob,"pic_name":picname});
    };
    image.src = src;
};
//到這里我們圖片壓縮的代碼就結(jié)束了倔撞。我們?cè)偌由辖惭觯粋€(gè)事件控制把需要上傳的圖片數(shù)組傳給后臺(tái)就行啦。


$.ajax({
   "url":"",
   "type":"post"
   "dataType":"json",
   "data":{"pic":imgarr},
   "success":function(res){}
});