js 點擊文本框，預覽選擇圖片

博客已遷移到CSDN《https://blog.csdn.net/qq_33375499》

 

　　點擊文件選擇框，選擇圖片文件，通過FileReader對象，讀取圖片文件中的內容，存放於result中，具體代碼如下

<input type="file" onchange="fileReader(this)" />
<div id="d">
    <img id="img" src="" />
</div>

<script type="text/javascript">
function fileReader(obj){
var file = obj.files;
var img = document.getElementById("img");
var reader = new FileReader();// 操作圖片
if(/image/.test(file[0].type)){
reader.readAsDataURL(file[0]);
}else {
alert('請選擇圖片!');
obj.value = "";
return;
}
// 圖片加載錯誤
reader.onerror = function(){
document.write("圖片加載錯誤");
}
// 圖片加載完成
reader.onload = function(){
img.src = reader.result;
}
}
</script>