<input type="file" name="file" multiple>
<img src="" alt="">
<script>
//给输入框添加change事件
var input = document.querySelector("input");
input.addEventListener("change", function() {
//文件读取对象,是系统自带的对象
var reader = new FileReader();
// console.log(reader);
// error: null
// onabort: null
// onerror: null
// onload: null 上传成功之后的方法
// onloadend: null 上传完成的方法
// onprogress: null 持续上传 上传中
// onloadstart: null
//文件上传的dom对象有一个files伪数组对象,里面包含上传的对象
var file = input.files;
// console.log(file)
// 2. 读取上传的地址 url 是以base64开头的加密字符
reader.readAsDataURL(file[0]);
//必须要得到文件上传成功后才能拿到地址
reader.onload = function(e) {
// console.log(reader.result);//储存图片地址
//把图片预览
document.querySelector("img").src = reader.result;
}
}) |
|