HTML图片预览怎么做?
fileReader 方法名:readAsBinaryString 参数:file 描述:将文件读取为二进制编码 方法名:readAsText 参数:file[, encoding]描述:按照格式将文件读取为文本,encode默认为UTF-8 方法名:readAsDataURL 参数:file 描述:将文件读取为DataUrl 方法名:abort 参数:(none) 描述:终端读取操作 FileReader接口事件 FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。 使用 fileReader 读取图片
if(!(window.FileReader && window.File && window.FileList && window.Blob)){
show.innerHTML = '您的浏览器不支持fileReader';
upimg.setAttribute('disabled', 'disabled');
return false;
}
2.1 读取单张图片
var upimg = document.querySelector('#upimg');
upimg.addEventListener('change', function(e){
var files = this.files;
if(files.length){
// 对文件进行处理,下面会讲解checkFile()会做什么
checkFile(this.files);
}
});
// 图片处理
function checkFile(files){
var file = files[0];
var reader = new FileReader();
// show表示,用来展示图片预览的
if(!/image\/\w+/.test(file.type)){
show.innerHTML = '请确保文件为图像类型';
return false;
}
// onload是异步操作
reader.onload = function(e){
show.innerHTML = '';
}
reader.readAsDataURL(file);
}
2.2 读取多张图片
// change事件没有改动
// 图片处理
function checkFile(files){
var html='', i=0;
var func = function(){
if(i>=files.length){
// 若已经读取完毕,则把html添加页面中
show.innerHTML = html;
}
var file = files[i];
var reader = new FileReader();
// show表示,用来展示图片预览的
if(!/image\/\w+/.test(file.type)){
show.innerHTML = '请确保文件为图像类型';
return false;
}
reader.onload = function(e){
html += '';
i++;
func(); //选取下一张图片
}
reader.readAsDataURL(file);
}
func();
}
2.3 拖拽拉去图片
拖拽区域
var drag = document.getElementById('drag');
drag.addEventListener('dragenter', function(e){
// 拖拽鼠标进入区域时
this.className = 'drag_hover';
}, false);
drag.addEventListener('dragleave', function(e){
// 拖拽鼠标离开区域时
this.className = '';
}, false);
drag.addEventListener('drop', function(e){
// 当鼠标执行‘放’的动作时,执行读取文件操作
var files = e.dataTransfer.files;
this.className = '';
if (files.length != 0) {
checkFile(files);
};
e.preventDefault();
}, false)
drag.addEventListener('dragover', function(e){
// 当对象拖动到目标对象时触发
e.dataTransfer.dragEffect = 'copy';
e.preventDefault();
}, false);
点击查看原图
var imgs = new Image();
imgs.src = img.src; // 给新的img对象链接
console.log(imgs.width, imgs.height);
console.log(img.naturalWidth); // 获取图片的原始的宽度
console.log(img.naturalHeight); // 获取图片的原始的高度
赞0
踩0