圖片上傳的“預覽”與“顯示進度條”的前端實現

一、 圖片上傳的“預覽”功能

1、HTML代碼

<img src="" alt="" id="myIDphoto" style="display:none;" />

<input type="file" name="idphoto" id="IDphoto" class="id-photo" @change="showIDPic(event)"/>

2、JavaScript 代碼

showIDPic: function (e) {

　　if (file.files && file.files[0]){

　　　　for (var i = 0; i < e.target.files.length; i++) {
　　　　　　var file = e.target.files.item(i);
　　　　　　if (!(/^image\/.*$/i.test(file.type))) {
　　　　　　　　continue; //不是圖片 就跳出這一次循環 
　　　　　　}
　　　　　　//實例化FileReader API 
　　　　　　var freader = new FileReader();
　　　　　　freader.readAsDataURL(file);
　　　　　　freader.onload = function (e) {
　　　　　　　　var myIDphoto = document.getElementById("myIDphoto");
　　　　　　　　myIDphoto.style.display = "block";
　　　　　　　　myIDphoto.src=e.target.result;
　　　　　　}.bind(this);
　　　　}

　　}else{

　　　　myIDphoto.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

　　}
}

實現要點

● 對於 Chrome、Firefox、IE10 使用 FileReader 來實現。

● 對於 IE6~9 使用濾鏡 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 來實現。

補充：canvas裁圖

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const img = document.getElementById('zzximg');// 實際接收從URL.createObjectURL傳過來url的img標簽。

const previewImg = document.getElementById('preview'); // 接受裁剪后傳過來的url的img標簽

img.onload = function() {

　　 const imgW = img.offsetWidth;

　　const imgH = img.offsetHeight;

　　let x = 0;

　　 let y = 0;

　　let wh = 0;

　　if (imgW > imgH) {

　　　　x = Math.floor((imgW - imgH) / 2);

　　　　 wh = imgH;

　　 } else {

　　　　 y = Math.floor((imgH - imgW) / 2);

　　　　 wh = imgW;

　　}

　　ctx.drawImage(img, x, y, wh, wh, 0, 0, 220, 220); // 裁剪多一倍進行縮放，保證預覽圖清晰

　　 const imgSrc = canvas.toDataURL('image/png');

　　 ctx.clearRect(0, 0, canvas.width, canvas.height);

　　 previewImg.src = imgSrc;

　　 img.style.display = 'none';

}

二、圖片上傳的“顯示進度條”功能

let progressBar = document.getElementById("p"),

　　 client = new XMLHttpRequest()

client.open("GET", "xxx/xxx")

client.onprogress = function(e) {

　　if (e.lengthComputable) {

　　　　let total = e.total;

　　　　let loaded = e.loaded;

　　　　 let percentage = Math.floor(total/loaded);

　　　　 progressBar.style.width = `${percentage}%`

　　}

}

client.send()