H5實現多圖上傳與預覽，圖片壓縮上傳
阿新 • • 發佈：2019-01-31
H5多圖上傳，並實現壓縮(可根據實際情況選擇對多大的圖片進行壓縮，本例為大於512KB的進行壓縮)和預覽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5多圖壓縮上傳與預覽</title> <style type="text/css"> .container { margin: 30px auto; max-width: 1100px; } .btn { position: relative; display: inline-block; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; text-align: center; vertical-align: middle; font-weight: 400; color: #fff; background-color: #627aad; border: 1px solid #627aad; border-radius: 3px; cursor: pointer; } .btn-danger { background-color: #de815c; border-color: #de815c; } .btn-info { background-color: #5cafde; border-color: #5cafde } .file-input { position: absolute; left: -99999px } .image-wrap { overflow: hidden; min-height: 120px; margin-top: 15px; margin-bottom: 15px; } .image-preview { float: left; width: 120px; height: 120px; margin-right: 10px; text-align: center; cursor: pointer; } .image-preview img { height: 100%; width: 100%; } .big-image { margin-top: 15px; } </style> </head> <body> <div class="container"> <label class="btn" for="fileInput"> 多圖上傳 <input id="fileInput" class="file-input" type="file" multiple="multiple" accept="image/jpeg,image/jpg,image/png"> </label> <span class="btn btn-danger" id="delImage">刪除</span> <div id="imageWrap" class="image-wrap"> </div> <span class="btn btn-info" id="submitImage">上傳</span> <div class="big-image"> <img src="" alt="" id="bigImage"> </div> </div> <script> // 相容IE10+ (function imgUp() { var fileInput = document.getElementById('fileInput'), imageWrap = document.getElementById('imageWrap'), delImage = document.getElementById('delImage'), bigImage = document.getElementById('bigImage'), submitImage = document.getElementById('submitImage'), photoCompress, submitPicture; // 對圖片進行壓縮 photoCompress = function(fileObjAll, wrap, index) { var ready = new FileReader(), fileObj = fileObjAll[index], size = fileObj.size / 1024; quality = 1; // quality值越小，所繪製出的影象越模糊 // 512是512KB，大於512對圖片進行壓縮，可根據實際情況修改大小(壓縮並不精確，大概是這個範圍) quality = size > 512 ? quality = 512 / size : quality; //進行壓縮上傳 /*開始讀取指定的Blob物件或File物件中的內容. 當讀取操作完成時,readyState屬性的值會成為DONE, 如果設定了onloadend事件處理程式,則呼叫之.同時,result屬性中將包含一個data: URL格式的字串以表示所讀取檔案的內容.*/ ready.readAsDataURL(fileObj); ready.onload = function() { var img = new Image(); img.src = this.result; img.onload = function() { var that = this, // 預設按比例壓縮 w = that.width, h = that.height; //生成canvas var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.setAttribute('width', w); canvas.setAttribute('height', h); ctx.drawImage(that, 0, 0, w, h); var base64 = canvas.toDataURL(fileObj.type, quality), div = document.createElement('div'), img = document.createElement('img'); div.classList.add('image-preview'); img.setAttribute('src', base64); img.setAttribute('data-name', fileObj.name); div.appendChild(img); wrap.appendChild(div); index++; if (fileObjAll.length > index) { // 一個接著一個顯示的效果 setTimeout(function() { photoCompress(fileObjAll, wrap, index); }, 100); } }; }; }; // 上傳圖片 submitPicture = function() { var formData = new FormData(), convertBase64UrlToBlob; convertBase64UrlToBlob = function(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 }); }; Array.prototype.slice.call(imageWrap.getElementsByTagName('img')) .forEach(function(v, i) { var imgBlob = convertBase64UrlToBlob(v.getAttribute('src')) formData.append(v.getAttribute('data-name'), imgBlob); }) var xhr = new XMLHttpRequest(); // url更換為真實地址 xhr.open('POST', 'url', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); } else { console.log(xhr.statusText); } } xhr.send(formData); /*ajax傳送 $.ajax({ type: 'POST', url: 'url', data: formData, cache: false, processData: false, // 不處理資料 contentType: false, // 不設定內容型別 success: function(msg) { console.log(msg) } }); */ }; // 預覽圖片 fileInput.addEventListener('change', function(e) { photoCompress(this.files, imageWrap, 0); }, false) // 刪除圖片 delImage.addEventListener('click', function(e) { fileInput.value = ''; imageWrap.innerHTML = ''; }, false) // 預覽大圖 imageWrap.addEventListener('click', function(e) { var e = e.target, tagName = e.tagName.toLowerCase(); if (tagName === 'div') return; while (tagName !== 'img') { e = e.parentNode; } bigImage.setAttribute('src', e.getAttribute('src')) }, false) // 上傳圖片 submitImage.addEventListener('click', function(e) { submitPicture(); }, false) }()) </script> </body> </html>
效果：
預覽大圖：
