预备知识
图片预览需要用到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();
}
