html + js 實現圖片上傳，壓縮，預覽及圖片壓縮後得到Blob對象繼續上傳問題

先上效果上傳圖片後(設置了最多上傳3張圖片,三張後上傳按鈕消失) 點擊圖片放大,可以使用刪除和旋轉按鈕 (旋轉功能主要是因為ios手機拍照後上傳會有寫圖片被自動旋轉,通過旋轉功能可以調正) html頁面需要引入weui.min.css 不然沒法渲染樣式, 將下麵的代碼放在需要上傳文件的地方就行了 ...

先上效果

上傳圖片後(設置了最多上傳3張圖片,三張後上傳按鈕消失)

點擊圖片放大,可以使用刪除和旋轉按鈕 (旋轉功能主要是因為ios手機拍照後上傳會有寫圖片被自動旋轉,通過旋轉功能可以調正)

html頁面

需要引入weui.min.css 不然沒法渲染樣式, 將下麵的代碼放在需要上傳文件的地方就行了,如果不需要圖片旋轉功能, 可以直接刪掉那個div, 改不改js無影響

addPhoto.html

 <!--圖片縮略圖-->
         <div class="weui-cells weui-cells_form" style="margin-top:0px;">
                <div class="weui-cell">
                      <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                    <p class="weui-uploader__title" style="font-size: 14px;">照片:</p>
                                 <div class="weui-uploader__info"><span id="curNum">0</span>/3</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles"></ul> <!--縮略圖顯示-->
                                <div class="weui-uploader__input-box">
                                        <form action="" id="upBox_add" onsubmit="return false;">
                                        <input id="uploaderInput" name="file" class="weui-uploader__input zjxfjs_file" type="file"  capture="camera" accept="image/png,image/jpg,image/gif,image/JPEG" multiple=""></input>
                                     </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         <!--放大圖片顯示-->
          <div class="weui-gallery" id="gallery">
                  <span class="weui-gallery__img" id="galleryImg" style="bottom: 12%;"></span>
                  <div class="weui-gallery__opr" style="width:50%;">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
                 <!-- 圖片旋轉按鈕-->
                 <div class="weui-gallery__opr2" style="z-index: 1200;width:50%;position: absolute;bottom:0;right:0;background-color: #0d0d0d;color: #fff;line-height: 60px;text-align: center;">
                    <a href="javascript:" class="weui-gallery__rot">
                        <img src="/images/report/rotate.png" style="vertical-align: middle;"/>
                    </a> 
                 </div>
         </div>


　　 <!--圖片上傳時, 給出上傳提示, 並且不可操作數據, 上傳完成去掉提示-->
     <div id="loading" style="display:none; width:100%;height:100%;position:absolute;opacity: 0.5;z-index: 1001;">
          <div id="inner" style="display:none;width:22%; position:absolute; left:45%; top:33%;font-size: 16px;font-weight: bold;">  
                   <p>正在上傳...</p>
          </div>
     </div>

然後在addPhoto.js中調用上傳圖片的方法(上傳圖片的方法寫在了另一個js中)

addPhoto.js

var data={
  imgPathList:[],
  imgPath:'',
  imgNum:0,//原有圖片的數量，會根據刪除而減少,新增的值為0
  imgArr:null
  }
var add = {
    template: '#add',
    data: function(){
        return data;
    },
    created: function () {
        var self = this;
    },
    mounted:function(){//判斷當前操作系統是安卓還是ios , 電腦瀏覽器使用可以去掉這個判斷,加上也不影響
        var u = navigator.userAgent, 
        app = navigator.appVersion;
        
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; 
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
        
        if (isAndroid) {
            $("#upBox_add").find("input[type='file']").attr("capture","camera");
        }
        if (isIOS) {
            $("#upBox_add").find("input[type='file']").removeAttr("capture");
        }
      
    },
    methods: {
　　　　　　loadingOpen:function () {
             $('#loading').css('display','block');
             $('#inner').css('display','block');//顯示上傳提示
         },
         loadingClose:function () {
             $('#loading').css('display','none');
             $('#inner').css('display','none');
         },
         upload:function () {
                uploadImg("/xxx/xxx");//傳的參數是圖片上傳的介面, 用於ajax上傳 
         },
         addToDB:function(){
　　　　　　　　  if(0 != addReport_data.imgPathList.length){
                     data.imgPath = data.imgPathList.join(",");
                }
              //我這裡用的是vue的框架,根據自己的框架修改保存到資料庫的方法
　　　　　　　　Vue.resource("xxxx).save(data).then(function(response){
                　　
             });
         }
}

圖片上傳的js

upload.js


Array.prototype.indexOf = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};
Array.prototype.removeVal = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};
/**
 三個參數
 file：一個是文件(類型是圖片格式)，
 w：一個是文件壓縮的後寬度，寬度越小，位元組越小
 objDiv：一個是容器或者回調函數
 photoCompress()
 */
function photoCompress(file,w,objDiv){
    var reader=new FileReader();
    /*開始讀取指定的Blob對象或File對象中的內容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設置了onloadend事件處理程式,則調用之.同時,result屬性中將包含一個data: URL格式的字元串以表示所讀取文件的內容.*/
    reader.readAsDataURL(file);
    reader.onloadend=function(e){
        var re=this.result;
        canvasDataURL(re,w,objDiv);
    }
}
function canvasDataURL(path, obj, callback){
    var img = new Image();
    img.src = path;
    img.onload = function(){
        var that = this;
        // 預設按比例壓縮
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.7;  // 預設圖片質量為0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 創建屬性節點
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 圖像質量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
            quality = obj.quality;
        }
        // quality值越小，所繪製出的圖像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回調函數返回base64的值
        callback(base64);
    }
}
/**
 * 將以base64的圖片url數據轉換為Blob
 * @param urlData
 * 用url方式表示的base64圖片數據
 */
function convertBase64UrlToBlob(urlData){
    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    var b = new Blob([u8arr], {type:mime});
    return b;
}

var uploadImg="";
$(function() {
    var files;
    var filearr = [];
    var allImgSize=0;
    var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
        $gallery = $("#gallery"),
        $galleryImg = $("#galleryImg"),
        $uploaderInput = $("#uploaderInput"),
        $uploaderFiles = $("#uploaderFiles");
    
    //選好圖片觸發
    $uploaderInput.on("change", function(e) {
        var src, url = window.URL || window.webkitURL || window.mozURL;
        files = e.target.files; 
        if(files.length > 3){//一次最多上傳3張圖片
            alert("圖片數量大於3張,請重新選擇!");
            return;
        }
        if((filearr.length + files.length) <= 3){//判斷所選的總圖片數是否不大於3, 大於3張不能上傳
            var curNum =$("#curNum");
            var vehLen=0;
            if(addReport_data.imgArr!=null){
                vehLen=addReport_data.imgArr.length;
            }
            for(var i = 0, len = files.length, end = len-1; i < len; i++) {
               
                var curI=i;
                var imgSize = files[i].size;
                if(imgSize>1024*1024*5){//大於5M給出提示
                    alert("上傳的第"+(i+1)+"張圖片超過了5M!");
                    continue;
                }else{
                    //壓縮開始
                    var fileObj=files[i];
                   if(fileObj.size/1024 > 1025) { //大於1M，進行壓縮上傳
                        photoCompress(fileObj, {
                            quality: 0.1
                        }, function(base64Codes){
                            var bl = convertBase64UrlToBlob(base64Codes);
                            var form = new FormData(); 
                            form.append("file", bl,Date.parse(new Date())+".jpg");//將壓縮後的圖片編程文件對象
                            allImgSize+=bl.size;
                            if(bl.size/1024 < 1024){
                                filearr.push(form.get("file"));
                            }
                            if(curI==end){
                                curNum.text(vehLen+filearr.length);
                            }
                            form.delete("file");//刪除存入的壓縮後的文件對象, 保證每次壓縮只有當前被壓縮的對象
                        });
                    }else{ //小於等於1M 原圖上傳
                        filearr.push(files[i]);
                        allImgSize+=files[i].size;
                    }
                    //壓縮結束
     
                    if(url) {
                        src = url.createObjectURL(fileObj);
                    } else {
                        src = e.target.result;
                    }
                    $uploaderFiles.append($(tmpl.replace('#url#', src)));
                }
            }
            curNum.text(vehLen+filearr.length);
            if(filearr.length == 3){//如果已經選擇了3張圖片,隱藏上傳按鈕
                $('.weui-uploader__input-box').css('display','none');
            }
         }else{
             alert("圖片總數超過3張,請重新選擇!");
             return;
         }
    });

    var index; //第幾張圖片
    var current = 0;//旋轉多少度
    $uploaderFiles.on("click", "li", function() {
        index = $(this).index();
        $galleryImg.attr("style", this.getAttribute("style"));
        $gallery.fadeIn(100);
        current = 0;
    });

    $galleryImg.on("click", function() {
        $gallery.fadeOut(100);
    });
    
    //圖片旋轉
    $(".weui-gallery__opr2").click(function() {
        current += 90;
        $("#galleryImg").css('transform', 'rotate(' + current + 'deg)');
    });
    
    //刪除圖片
    $(".weui-gallery__del").click(function() {
        $("#upBox_add").find('input').val('');//每次刪除圖片後,置空input框
        //$uploaderInput.attr('type','text');//第二種方法,更改input的屬性, 實現重覆上傳

        var num=index-addReport_data.imgNum;
        allImgSize-=filearr[num].size;
        filearr.splice(num, 1);//刪除剛新增的圖片,如果是新增的，原有圖片（vehiclePicNum）為0
        $uploaderFiles.find("li").eq(index).remove();
        var vehLen=0;
        if(data.imgArr!=null){
            vehLen=data.imgArr.length;
        }
        $("#curNum").text(vehLen+filearr.length);
        if(filearr.length < 3){//判斷刪除後,上傳圖片是否不大於3, 不大於,顯示上傳按鈕
            $('.weui-uploader__input-box').css('display','block');
        }
        $gallery.fadeOut(100);
       
    });

    uploadImg=function(upUrl) {
        if(filearr.length>0){
            if(filearr.length<=3){
                var imgList = new FormData($("#upBox_add")[0]);  //formData提交
                imgList.delete("file");
                for(var i =0;i<filearr.length;i++){
                    imgList.append("file", filearr[i]);
                }
                //上傳所有的圖片
                if(allImgSize<1024*1024*10){
                    add.methods.loadingOpen();//上傳中
                    submitPicture(upUrl, imgList);
                }else{
                    alert("上傳圖片的總大小不能超過10M！");
                }

            }else{
                alert("最多只能上傳3張照片！");
                return false;
            }
        }else{//如果沒有選擇圖片
            add.methods.addToDB();
        }
    }
});


//上傳(將文件流數組傳到後臺)
function submitPicture(url,data) {
   
    $.ajax({
        type: "post",
        url: url,
        async: true,
        data: data,
        //下麵這兩個要寫成false，要不然上傳不了。
        processData: false,
        contentType: false,
        success: function(response) {//我這裡上傳介面返回的是json字元串,所以轉成了對象後通過for迴圈將圖片url存到數組中,方便html迴圈展示
　　　　　　　　　response = JSON.parse(response);var reArray=response.data;
                for(var i=0;i<reArray.length;i++){
                    data.imgPathList[i] = reArray[i].src;
                }
                add.methods.loadingClose();//關閉上傳提示
                add.methods.addToDB();//調用保存方法,添加到資料庫
       },
        error: function(xhr) {
        }
    });

}