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

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

巴特西

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

最新文章

热门文章