前端 上传图片并预览

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="file" id="file" />
<img class="img" id="img" src="" alt="" />
<script>
var File = document.getElementById('file');
File.onchange = function(e){
var file = this.files[0];
console.log(this.files[0])
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (e) {
console.log(e.target)
document.getElementById('img').setAttribute("src",e.target.result); //e.target.result就是最后的路径地址
};
}
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/dr-zhou/p/9115719.html