• 1、去除input型別為file上傳檔案時預設樣式和預設”選擇檔案”等；
• 2、壓縮要上傳的圖片
• 3、隱藏上傳按鈕, 手動觸發

實現思路

隱藏選擇圖片的input, 點選顯示圖片觸發input的onchange事件

// xxx.html
<img id="pic" src="./images/xxx.png">
<form id="uploadForm"  action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept
 
="image/*" onchange="showPic(this)" style="visibility:hidden;position:absolute;top:0px;width:0px" />
    <input type="button" value="upload" id="upload" style="visibility:hidden;position:absolute;top:0px;width:0px"/>
</form>

js程式碼

// 點選圖片觸發input的onchange事件
$('#pic').click(function() {
        $('#file'
 
).click();
})

function showPic(source) {
    var file = source.files[0];
    if (window.FileReader) {
        var fr = new FileReader();
        fr.onloadend = function(e) {
                // submit提交
                $('#upload').click();
                 document.getElementById("pic").src = e.target.result;
                 // 壓縮圖片
 

                 // cutImageBase64(e.target.result, 300, 0.5);
        };
        fr.readAsDataURL(file);
    }
}

壓縮圖片

cutImageBase64函式

function cutImageBase64(imgSrc,wid,quality) { //壓縮上上傳圖片
        var img = new Image();
        img.src = imgSrc;
        img.onload = function() {
            var that = this;

            //生成比例
            var w = that.width,
                h = that.height,
                scale = w / h;
                w = wid || w;
                h = w / scale;

            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            $(canvas).attr({ width: w, height: h });
            ctx.drawImage(that, 0, 0, w, h);

            // 生成base64
            base64 = canvas.toDataURL('image/jpeg', quality || 0.6);
            // $('#pic').attr('src',base64); // 顯示壓縮後的圖片
    };
}

動態更改form表單提交

var formData = new FormData(document.getElementById('registerForm'));
formData.append("name", '12222'); 
formData.append("file", convertBase64UrlToBlob(fileImg)); // fileImg是圖片的base64字串

base64圖片轉file檔案提交

將剪下後的base64圖片轉成file檔案提交，

/**
         * 將以base64的圖片url資料轉換為Blob
         * @param urlData
         *            用url方式表示的base64圖片資料
         */
        function convertBase64UrlToBlob(urlData){

            var bytes=window.atob(urlData.split(',')[1]);        //去掉url的頭，並轉換為byte

            //處理異常,將ascii碼小於0的轉換為大於0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }

            return new Blob( [ab] , {type : 'image/png'});
        }