当前位置： 移动技术网 > IT编程>网页制作>Html5 > 6.12号整理（h5新特性-图片、文件上传）

6.12号整理（h5新特性-图片、文件上传）

2019年06月13日  | 移动技术网IT编程  | 我要评论

火炬之光2最好玩的职业,孽债肉偿,陈冰冰

    <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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网