多个文件预览

最新推荐文章于 2023-03-23 12:54:17 发布

没有名字o_o

最新推荐文章于 2023-03-23 12:54:17 发布

阅读量512

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/liujinahui/article/details/49422741

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里实现了多个文件预览，并且把多个文件的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>