A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 石高攀 初级黑马   /  2019-6-21 13:54  /  829 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<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;
            }
        })

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马