預(yù)備知識(shí)

圖片預(yù)覽需要用到html5里面的FileReader對(duì)象，通過FileReader讀取選擇的圖片文件，并用img顯示。FileReader.readAsDataURL(file)將圖片讀取為data:image/png;base64,開頭的字符串，img可以將此字符串解析為圖片。

html5部分

<div class="container">
    <img id="preview" width="200" class="preview-image">
    <form id="fileUpload" action="/web/upload/image" method="post" enctype="multipart/form-data">
        <input id="uploadInput" type="file" name="file" accept="image/png,image.jpg" />
        <input type="submit" value="上傳"/>
    </form>
</div>

js處理文件選擇事件(onchange)，并預(yù)覽

document.getElementById("uploadInput").onchange = function(e){
    console.log(e);
    var file = e.srcElement.files[0];
    var reader = new FileReader();
    reader.onload = function(e){
        console.log('FileReader : ',e);
        document.getElementById('preview').src = e.target.result;
    }

    reader.readAsDataURL(file);
}

美化

默認(rèn)的圖片選擇input控件很不美觀，通常情況下，都是將input隱藏起來，放置一個(gè)美化的按鈕或者其它元素，當(dāng)用戶點(diǎn)擊的時(shí)候，在代碼中觸發(fā)input的click事件

<style>
    #uploadInput{
        display: none;
    }
</style>

<img id="preview" width="200" class="preview-image">
<form id="fileUpload" action="/web/upload/image" method="post" enctype="multipart/form-data">
    <input id="uploadInput" type="file" name="file" accept="image/png,image.jpeg" />
    <button id="choose-image" class="btn btn-default btn-info" type="button">選擇</button>
    <button type="submit" class="btn btn-default btn-danger">上傳</button>
</form>



document.getElementById('choose-image').onclick = function(e){
    //觸發(fā)圖片選擇input的點(diǎn)擊事件,即彈出系統(tǒng)的選擇文件筐
    document.getElementById("uploadInput").click();
}