设为首页 加入收藏

TOP

6.12号整理(h5新特性-图片、文件上传)
2019-09-17 19:00:14 】 浏览:21
Tags:6.12 整理 特性 图片 文件 上传
    <input type="file" id='myFile' multiple>
    <ul>
        <li>
            <img src="" alt="">
        </li>
        <li>
            <img src="" alt="">
        </li>
    </ul>
    <script>
        //文件上传
        //file 属性  this.files 可读属性:name  type size
        document.getElementById('myFile').onchange=function(){
            console.log(this.files);//
            for(var i=0;i<this.files.length;i++){
                console.log(this.files[i]);
                var file=this.files[i];
                //读取
                var fileReader=new FileReader();
                //读取方式
                fileReader.readAsDataURL(file);
                //结果
                fileReader.onload=function(){
                    console.log(this.result);
                    //追加插入页面  li-img
                    var img=document.createElement('img');
                    img.setAttribute('src',this.result);
                    var lis=document.createElement('li');
                    lis.appendChild(img);
                    document.querySelector('ul').appendChild(lis);
                }
            }

        }       
    </script>
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇web前端篇:JavaScript正则表达式 下一篇vuejs中拖动改变元素宽度实现宽度..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目