以為目前沒有找到原聲javascript的方法進行替換所以我們還是引入了jquery
一，引入jquery
二，界面展示
三，壓縮上傳的邏輯
? ? function Upload() {
? ? ? ? setTimeout(function () {
? ? ? ? ? ? UploadMethod();
? ? ? ? },100)
? ? }
? ? function UploadMethod() {
? ? ? ? const imgPath = document.getElementById("idCardFront").value;
? ? ? ? console.log("正面的圖片地址:imgPath="+imgPath);
? ? ? ? if (imgPath == '') {
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //判斷上傳文件的后綴名
? ? ? ? const strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
? ? ? ? if (strExtension != 'jpeg' && strExtension != 'jpg' && strExtension != 'gif'
? ? ? ? ? ? && strExtension != 'png' && strExtension != 'bmp'&&strExtension != 'JPG' && strExtension != 'GIF'
? ? ? ? ? ? && strExtension != 'PNG' && strExtension != 'BMP') {
? ? ? ? ? ? console.log('請選擇圖片文件');
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? const file = $("#idCardFront").prop('files')[0];
? ? ? ? if(file.size > 10 * 1024 * 1024){//如果大于10MB就重新選擇圖片
? ? ? ? ? ? console.log('圖片大小超過10M，請重新選擇');
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? photoCompress(file, function (base64Codes) {
? ? ? ? ? ? let xhr="";
? ? ? ? ? ? const url = "https://***/upload"; // 接收上傳文件的后臺地址
? ? ? ? ? ? const form = new FormData(); // FormData 對象
? ? ? ? ? ? const bl = convertBase64UrlToBlob(base64Codes);
? ? ? ? ? ? form.append("uploadFile", bl, "file_"+Date.parse(new Date())+".png"); // 文件對象
? ? ? ? ? ? xhr = new XMLHttpRequest();? // XMLHttpRequest 對象
? ? ? ? ? ? xhr.open("post", url, true); //post方式，url為服務器請求地址，true 該參數規定請求是否異步處理。
? ? ? ? ? ? xhr.onload = function (evt) {
? ? ? ? ? ? ? ? //服務斷接收完文件返回的結果
? ? ? ? ? ? ? ? console.log(evt);
? ? ? ? ? ? ? ? const res = JSON.parse(evt.target.responseText);
? ? ? ? ? ? ? ? if (res.status == "success") {
? ? ? ? ? ? ? ? ? ? console.log("上傳成功：res.result="+res.result);
? ? ? ? ? ? ? ? ? ? document.getElementById("showImg").src=base64Codes;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? console.log(res.message);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }; //請求完成
? ? ? ? ? ? xhr.onerror =? function (evt) {
? ? ? ? ? ? ? ? console.log("上傳失敗")
? ? ? ? ? ? }; //請求失敗
? ? ? ? ? ? xhr.send(form); //開始上傳，發送form數據
? ? ? ? });
? ? }
? ? /*
? ? 兩個參數
? ? file：一個是文件(類型是圖片格式)，
? ? objDiv：一個是容器或者回調函數
? ? */
? ? function photoCompress(file, objDiv) {
? ? ? ? const ready = new FileReader();
? ? ? ? /*開始讀取指定的Blob對象或File對象中的內容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容.*/
? ? ? ? ready.readAsDataURL(file);
? ? ? ? ready.onload = function () {
? ? ? ? ? ? const re = this.result;
? ? ? ? ? ? const w={
? ? ? ? ? ? ? ? quality:300/(10*1024)
? ? ? ? ? ? }
? ? ? ? ? ? canvasDataURL(re, w,file, objDiv)
? ? ? ? }
? ? }
? ? function canvasDataURL(path, obj,file, callback) {
? ? ? ? const img = new Image();
? ? ? ? img.src = path;
? ? ? ? img.onload = function () {
? ? ? ? ? ? /* 按圖片縮小寬高完成圖片壓縮（未啟用） */
? ? ? ? ? ? const that = this;
? ? ? ? ? ? let w = that.width,
? ? ? ? ? ? ? ? h = that.height;
? ? ? ? ? ? //生成canvas
? ? ? ? ? ? const canvas = document.createElement('canvas');
? ? ? ? ? ? const ctx = canvas.getContext('2d');
? ? ? ? ? ? const anw = document.createAttribute("width");
? ? ? ? ? ? anw.nodeValue = w;
? ? ? ? ? ? const anh = document.createAttribute("height");
? ? ? ? ? ? anh.nodeValue = h;
? ? ? ? ? ? canvas.setAttributeNode(anw);
? ? ? ? ? ? canvas.setAttributeNode(anh);
? ? ? ? ? ? ctx.drawImage(that, 0, 0, w, h);
? ? ? ? ? ? /* 按圖像質量壓縮（啟用） */
? ? ? ? ? ? // quality值越小，所繪制出的圖像越模糊。用圖片質量壓縮
? ? ? ? ? ? let quality = 0.7;? // 默認圖片質量為0.7
? ? ? ? ? ? if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
? ? ? ? ? ? ? ? quality = obj.quality;
? ? ? ? ? ? }
? ? ? ? ? ? if(file.size<=300*1024){
? ? ? ? ? ? ? ? quality=1;
? ? ? ? ? ? }
? ? ? ? ? ? /* 最后將圖片轉換成base64 */
? ? ? ? ? ? const base64 = canvas.toDataURL('image/jpeg', quality);
? ? ? ? ? ? callback(base64);//回調
? ? ? ? }
? ? }
? ? /**
? ? * 將以base64的圖片url數據轉換為Blob，用于form表單上傳
? ? * @param urlData
? ? * 用url方式表示的base64圖片數據
? ? */
? ? function convertBase64UrlToBlob(urlData){
? ? ? ? let 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});
? ? }
