HTML图片预览怎么做？

1. fileReader 方法名：readAsBinaryString 参数：file 描述：将文件读取为二进制编码 方法名：readAsText 参数：file[, encoding]描述：按照格式将文件读取为文本，encode默认为UTF-8 方法名：readAsDataURL 参数：file 描述：将文件读取为DataUrl 方法名：abort 参数：(none) 描述：终端读取操作 FileReader接口事件 FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
2. 使用 fileReader 读取图片

if(!(window.FileReader && window.File && window.FileList && window.Blob)){
    show.innerHTML = '您的浏览器不支持fileReader';
    upimg.setAttribute('disabled', 'disabled');
    return false;
}

2.1 读取单张图片

<input type="file" id='upimg' />
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表示<div id='show'></div>，用来展示图片预览的
    if(!/image\/\w+/.test(file.type)){
        show.innerHTML = "请确保文件为图像类型";
        return false;
    }
    // onload是异步操作
    reader.onload = function(e){
        show.innerHTML = '<img src="'+e.target.result+'" alt="img">';
    }
    reader.readAsDataURL(file);
}

2.2 读取多张图片

<input type="file" id='upimg' multiple />
// 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表示<div id='show'></div>，用来展示图片预览的
        if(!/image\/\w+/.test(file.type)){
            show.innerHTML = "请确保文件为图像类型";
            return false;
        }
        reader.onload = function(e){
            html += '<img src="'+e.target.result+'" alt="img">';
            i++;
            func(); //选取下一张图片
        }
        reader.readAsDataURL(file);
    }
    func();
}

2.3 拖拽拉去图片

<style>
    .drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}
    .drag_hover{background: #FAD6F9;}
</style>
<span class='drag' id="drag">拖拽区域</span>

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

1. 点击查看原图

var imgs = new Image();
imgs.src = img.src; // 给新的img对象链接
console.log(imgs.width, imgs.height);

console.log(img.naturalWidth);  // 获取图片的原始的宽度
console.log(img.naturalHeight); // 获取图片的原始的高度