劃水摸魚的時候研究了JS圖片的上傳預覽，分別是FileReader()独撇、createObjectURL()，在此分享一下！
效果圖：

圖片上傳預覽

點擊放大按鈕

/********** 引用的CSS **********/
<link  rel="stylesheet">

/********** CSS **********/
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .imgDiv{
        margin: 20px 0 0 20px;
        width: 300px;
        height: 200px;
        border: 1px solid #666;
    }
    .imgDiv:hover{
        background-color: #F6F6F8;
    }
    #upImage{
        position: absolute;
        top: 20px;
        left: 20px;
        opacity: 0;
        cursor: pointer !important;
        width: 300px;
        height: 200px;
        opacity: 0;
    }
    .memo{
        text-align: center;
        margin-top: 70px; 
    }
    .memo>p{
        line-height: 20px;
    }
    .memo .plus{
        font-size: 40px;
        color: #666;
        text-align: center;
    }
    .memo .upText{
        text-align: center;
    }
    .preview{
        text-align: center;
    }
    .preview img{
        height: 198px;
    }
    .otherIcon{
        position: absolute;
        z-index: 10;
        left: 274.5px;
        top: 20.5px;
        cursor: pointer;
    }
    .otherIcon .conIcon{
        padding: 2px;
        background-color: #808080;
        opacity: 0.8;
        color: white;
        font-size: 16px;
        width: 20px;
        height: 20px;
    }
    .otherIcon .conIcon:hover{
        opacity: 1;
    }
</style>

/********** HTML **********/
<div class="imgDiv">
    <div class="memo">
        <p class="plus">+</p>
        <p class="upText">點擊上傳圖片</p>
    </div>
    <input type="file" id="upImage" onchange="changeImg(this)" accept="image/*">
</div>

/********** 引用的JS **********/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

FileReader()：

/****** FileReader方法 ******/
function upImage(){
    var fr = new FileReader();
    var imgFile = document.getElementById("upImage").files[0];
    if (imgFile.size > 1024 * 500 * 1){
        return alert("上傳圖片不能超過500KB");
    }
    if (imgFile.type != "image/png" && imgFile.type != "image/jpeg" && imgFile.type != "image/gif"){
        return alert("上傳圖片格式不正確");
    }
    fr.readAsDataURL(imgFile);
    fr.onload = function(){
        $(".imgDiv").html(
            '<div class="preview"><img id="imgPreview" src="' + this.result + '" alt=""></div>' +
            '<div class="otherIcon" style="display:none">' +
                '<span class="glyphicon glyphicon-remove conIcon" onclick="delIcon()" title="刪除圖片"></span>' +
                '<span>&nbsp;</span>' +
                '<span class="glyphicon glyphicon-zoom-in conIcon" onclick="magnifyIcon()" title="放大圖片"></span>' +
            '</div>'
        )
        $(".imgDiv").after(
            '<div class="modal fade" id="magnifyModal" tabindex="-1" role="dialog">' +
                '<div class="modal-dialog modal-lg" role="document">' +
                    '<div class="modal-content"></div>' +
                '</div>' +
            '</div>'
        );
    } 
}

createObjectURL()：

/***** createObjectURL方法 *****/
function changeImg(obj) {
    var imgSize = obj.files[0].size;
    if (imgSize > 1024 * 500 * 1) {
        return alert("上傳圖片不能超過500KB");
    };
    if (obj.files[0].type != 'image/png' && obj.files[0].type != 'image/jpeg' && obj.files[0].type != 'image/gif') {
        return alert("上傳圖片格式不正確");
    };
    var imgSrc = getObjectURL(obj.files[0]);
    $(".imgDiv").html(
        '<div class="preview"><img id="imgPreview" src="' + imgSrc + '" alt=""></div>' +
        '<div class="otherIcon" style="display:none">' +
            '<span class="glyphicon glyphicon-remove conIcon" onclick="delIcon()" title="刪除圖片"></span>' +
            '<span>&nbsp;</span>' +
            '<span class="glyphicon glyphicon-zoom-in conIcon" onclick="magnifyIcon()" title="放大圖片"></span>' +
        '</div>'
    );
    $(".imgDiv").after(
        '<div class="modal fade" id="magnifyModal" tabindex="-1" role="dialog">' +
        '<div class="modal-dialog modal-lg" role="document">' +
        '<div class="modal-content"></div>' +
            '</div>' +
        '</div>'
    );
}

//建立可存取到該file的url
function getObjectURL(file) {
    var url = null;
    //下面函數(shù)執(zhí)行效果是一樣的艇棕，只是針對不同的瀏覽器執(zhí)行不同的js函數(shù)而已
    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;
}

其他所需方法：

//鼠標hover顯示刪除和放大圖片
$(function () {
    $(".imgDiv").mouseenter(function () {
        $(".otherIcon").css("display", "block");
    })
    $(".imgDiv").mouseleave(function () {
        $(".otherIcon").css("display", "none");
    })
})

//刪除圖片
function delIcon() {
    $(".imgDiv").html(
        '<div class="memo">' +
            '<p class="plus">+</p>' +
            '<p class="upText">點擊上傳圖片</p>' +
        '</div>' +
        '<input type="file" id="upImage" onchange="upImage()" accept="image/*">'
    );
    $("#magnifyModal").remove();
}

//放大圖片
function magnifyIcon() {
    var magnifyImgSrc = document.getElementById('imgPreview').src;
    $("#magnifyModal .modal-content").html('<div style="text-align:center"><img style="height:500px" src="' + magnifyImgSrc + '" alt=""><div>');
    $("#magnifyModal").modal("show");
}

對比：

總結(jié)：FileReader()和createObjectURL()均不支持IE10以下的瀏覽器傻昙，從性能優(yōu)化角度來說闺骚，createObjectURL()可能相對較好