使用FileReader实现前端图片预览

HTML5

1.使用FileReader实现前端图片预览

<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">

var fileInput = document.querySelector('input[type=file]');
var previewImg = document.querySelector('img');

fileInput.addEventListener('change', function () {
    var file = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function () {
        previewImg.src = reader.result;
    }, false);

    reader.readAsDataURL(file);
}, false);

2.使用window.webkitURL.createObjectURL(file)

function getObjectURL(file) {
    var url = null;
    if (window.navigator.userAgent.indexOf("MSIE") < 1) { // 非ie
        file = file.files[0];
    }
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}