獲取本地圖片可以使用FileReader對象中的readAsDataURL方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery 獲取本地圖片的方法</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<input class="input-file" type="file">
<div>
<img src="" class="photo"/>
</div>
<script>
$(function(){
$(".input-file").change(function(e) {
//得到事件的目標節點，既input元素
var imgBox = e.target;
getImg(imgBox);
$(".input-file").change = null;
});
function getImg(tag) {
var file = tag.files[0];
var reader = new FileReader();
//將文件以Data URL形式讀入頁面
reader.readAsDataURL(file);
reader.onload = function() {
//result結果爲 DataURL
var imgSrc = this.result;
//將圖片顯示出來
$(".photo").attr("src", imgSrc);
}
}
})
</script>
</body>
</html>