获取本地图片可以使用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>