多个文件预览

来源：互联网发布：mac百度云不好用编辑：程序博客网时间：2024/06/05 18:25

这里实现了多个文件预览，并且把多个文件的url放在了urlData数组中，方便后台上传
啥也不多说，先上代码；

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body><input type="file" multiple="multiple"/><div id="result" name="result"></div><script>    //判断浏览器是否支持FileReader接口    if(typeof FileReader == 'undefined'){        result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";        //使选择控件不可操作        file.setAttribute("disabled","disabled");    }    if(window.FileReader){        var source = document.getElementsByTagName('input')[0];        var reader = new FileReader();        source.onchange=function(){            var fileList = source.files;//图片列表对象            alert(fileList.length)//            urlData数组用于存储用户选择的所有图片地址           var urlData = []           var i=0;           var t = setInterval(function(){                if(i<fileList.length){                    reader.readAsDataURL(fileList[i]);                    reader.onload=function(){                        var result = document.getElementById('result');//                        console.log(this.result) //返回的是图片的地址                        result.innerHTML+='<img src="' + this.result +'" alt="" />';                        urlData.push(this.result);                        console.log(urlData)                    }                    i++;                }else{                    clearInterval(t)                }            },1)        }    }</script></body></html>

更多有关API FileReader 请移步博客第X个前端爱好者

0 0