图片上传的“预览”与“显示进度条”的前端实现

一、 图片上传的“预览”功能

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()