预备知识

图片预览需要用到html5里面的FileReader对象，通过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)，并预览

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

美化

默认的图片选择input控件很不美观，通常情况下，都是将input隐藏起来，放置一个美化的按钮或者其它元素，当用户点击的时候，在代码中触发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){
    //触发图片选择input的点击事件,即弹出系统的选择文件筐
    document.getElementById("uploadInput").click();
}