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