Finishing No. 6.12 (h5 new feature - pictures, file upload)

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

Guess you like

Origin www.cnblogs.com/strongzyh/p/11010028.html