html圖片上傳並預覽筆記

一、圖片上傳，原圖無壓縮

　　1、用到的js和css（只為美規，可以不用）:jasny-bootstrap.css、jasny-bootstrap.js

　　2、、html代碼

<div class="row">
　　<div class="col-xs-6">
          <div class="form-group">
                <label class="control-label col-sm-4" title="">
                   <span class="required ">*</span> ${text('選擇文件')}：<i class="fa icon-question hide"></i></label>
                <div class="col-sm-8">
                    <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                          <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                              <span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">選擇文件</span><span class="fileinput-exists">更改</span>
                                        <input id="file" name="file" type="file" accept=".xls,.xlsx"></span>
                              <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
               </div>
         </div>
　　</div>
</div>

　　3、后台接收代碼

@PostMapping(value = "save")
    @ResponseBody
    public String save(@RequestParam("file") MultipartFile file) {
        try {
            /* 文件流拿到了就隨便保存了 */
        } catch (Exception e) {
            e.printStackTrace();
            return renderResult(Global.FALSE, text("保存文件失敗！"));
        }
        return renderResult(Global.TRUE, text("保存文件成功！"));
    }

 四、圖片壓縮后上傳

1、設置js腳本壓縮

async function pushFrom(){
　　let file3 = document.getElementById('file').files[0];
　　if(file3 && '' != file3){
　　　　let base64 =  await PromiseCompress(file);
　　　　var formData = new FormData(form);
　　　　formData.append("base64 ",base64 );
　　　　
　　　　$.ajax({ 
   　　　　type:'post',  
   　　　　url: "/alcms/workermonitor/siAlcWorkerMonitor/everydaymonitorsave", 
   　　　　processData:false,
      　　contentType:false,
   　　　　data: formData,  //重點必須為一個變量如：data
   　　　　success:function(data){      
      
   　　　　},
   　　　　error:function(e){ 
   　　　　}
　　　　}) 
　　｝
}

//不對圖片進行壓縮
function directTurnIntoBase64(fileObj,callback) {
        var r = new FileReader();
        //轉成base64
        r.onload = function () {
            imgBase64 = r.result;
         //   console.log(imgBase64);
            callback(imgBase64)
        }
        r.readAsDataURL(fileObj);//轉成base64格式
}

    /* 異步壓縮圖片 */
async function PromiseCompress(fileObj) {
    return new Promise(function (resolve, reject) {
        compress(fileObj,function (imgBase64) {
                resolve(imgBase64);
        })
    })
}


    //對圖片進行壓縮
function compress(fileObj,callback) {
    console.log('准備壓縮的對象：'+fileObj);
    if(!fileObj){
        console.log('不壓縮');
        return;
    }
    if(typeof (FileReader) === 'undefined'){
        console.log("當前瀏覽器內核不支持base64圖片壓縮")
        directTurnIntoBase64(fileObj,callback);
    }else{
        try{var reader = new FileReader();
            // 原圖
            var yimage = $('<img/>');
            yimage.src = fileObj.result;
            reader.onload = function (e) {var image = $('<img/>');
                image.on('load',function () {
                    let imageNW = this.naturalWidth;
                    let imageNH = this.naturalHeight;
                    let compressRatia = 1;
                    if(imageNH > 800){
                        // 圖片高大於800時等比例縮小到800以下
                        compressRatia = 800 / imageNH;
                    }else if(imageNW > 500){
                        // 圖片寬大於500時等比例縮小到500以下
                        compressRatia = 500 / imageNW;
                    }
                    //定義畫布大小,也就是圖片壓縮之后的像素
                    var squareW = Number(imageNW * compressRatia).toFixed(0);
                    var squareH = Number(imageNH * compressRatia).toFixed(0);
                    var canvas = document.createElement('canvas'),
                        context = canvas.getContext('2d'),
                        imageWidth = 0, //壓縮圖片大小
                        imageHeight = 0,
                        offsetX = 0,
                        offsetY = 0,
                        data = '';
                        canvas.width = squareW;
                        canvas.height = squareH;
                        context.clearRect(0,0,squareW,squareH);
                    console.log('判斷寬度');
                    if(this.width > squareW){
                        imageWidth = Math.round(squareW);
                        imageHeight = squareH;
                        offsetX = Math.round((imageWidth-squareW)/2);
                    }else{
                        imageHeight = Math.round(squareH);
                        imageWidth = squareW;
                        offsetY = Math.round((imageHeight - squareH)/2)
                    }
                    console.log('准備壓縮');
                    context.drawImage(this,offsetX,offsetY,imageWidth,imageHeight);
                    var data = canvas.toDataURL('image/jpeg')
                    callback(data)
                });
                image.attr('src',e.target.result)
            };
            console.log('執行reader.readAsDataURL');
            console.log(Object.prototype.toString.call(fileObj));
            console.dir(fileObj);
            reader.readAsDataURL(fileObj);
        }catch (e) {
            console.log('壓縮失敗!' + e);
            //調用不壓縮方法
            directTurnIntoBase64(fileObj,callback)
        }
    }
}