1. 程式人生 > >前端js壓縮上傳圖片 多圖、單圖 ajax上傳

前端js壓縮上傳圖片 多圖、單圖 ajax上傳

     <script>
       /*
        三個引數
        file:一個是檔案(型別是圖片格式),
        w:一個是檔案壓縮的後寬度,寬度越小,位元組越小
        objDiv:一個是容器或者回調函式
        photoCompress()
         */
        function photoCompress(file,w,objDiv){
            var ready=new FileReader();
            ready.readAsDataURL(file);
            ready.onload=function(){
                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);
            }
            return new Blob([u8arr], {type:mime});
        }
      	var form = new FormData(); //全域性變數 FormData 物件
      	
        //上傳檔案方法
        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 獲取檔案物件
            var url = "後臺圖片上傳介面"; // 接收上傳檔案的後臺地址 

            if(fileObj.size/1024 > 1025) { //大於1M,進行壓縮上傳
                photoCompress(fileObj, {
                    quality: 0.4
                }, function(base64Codes){
                    var bl = convertBase64UrlToBlob(base64Codes);
                    form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 檔案物件
                });
            }else{ //小於等於1M 原圖上傳
                form.append("file", fileObj); // 檔案物件
            }
        }

        //最後ajax上傳
         $.ajax({
            url: "後臺介面地址",
            type: "POST",
            data: form,
            cache: false,//上傳檔案無需快取
            processData: false,//用於對data引數進行序列化處理 這裡必須false
            contentType: false, //必須
            success: function (res) {
                alert('上傳成功');
            }
        })
    </script>