前端實現圖片上傳預覽
阿新 • • 發佈：2020-09-21
前端實現圖片上傳預覽
講乾貨，不囉嗦，開發中有時會遇到上傳圖片並即時生成圖片預覽的需求，以下為具體實現，主要是應用FileReader物件，有需要的請拿走。
具體實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片上傳預覽</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 設定input的type和accept，當然也可設定multiple允許多檔案上傳，這裡不做設定-->
<input type="file" accept="image/*" onchange="showImg(this)" />
<h2>以下為預覽效果：</h2>
<img src="" alt="" id="img">
<script>
function showImg(obj) {
var file=$(obj)[0].files[0]; //獲取檔案資訊
var imgdata='';
if(file)
{
var reader=new FileReader(); //呼叫FileReader
reader.readAsDataURL(file); //將檔案讀取為 DataURL(base64)
reader.onload=function(evt){ //讀取操作完成時觸發。
$("#img").attr('src',evt.target.result) //將img標籤的src繫結為DataURL
};
}
else{
alert("上傳失敗");
}
}
</script>
<style>
img{
width: 400px;
}
</style>
</body>
</html>測試結果：