黑马程序员技术交流社区

标题: 原生dom操作文件上传 [打印本页]

---

作者: 石高攀    时间: 2019-6-21 13:54
标题: 原生dom操作文件上传
<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;
            }
        })

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2