HTML5 FileReader + Ajax 多图上传( WEBAPP适用 )

IT-Pony 2016-12-01 AM 598℃ 0条
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax上传多图</title>
    <style>
        .more{
            padding: 0;
            margin: 0;
            height: 300px;
        }
        .subm{
            position: fixed;
            bottom: 0;
            margin: 0 auto;
            width: 100%;
        }
    </style>
</head>
<body>
<!-- 多上传多图 -->
<div class="more">
    <input type="file" name="File" class="File">
    <input type="file" name="File" class="File">
    <input type="file" name="File" class="File">
    <div class="tmpImg"></div>
</div>
<!-- 单上传多图 -->
<div class="one">
    <input type="file" name="File" class="FilesOne">
    <div class="tmpImg_one"></div>
</div>
<div class="subm">提交</div>
</body>
<script>
    window.onload=function()
    {
        //提交按钮
        var oDiv = document.getElementsByClassName("subm")[0];
        //多个上传框的集合
        var oFileItem = document.getElementsByClassName('File');
        //缩略图位置
        var otmpImg = document.getElementsByClassName('tmpImg')[0];

        //单上传点上传多图
        var oFileone = document.getElementsByClassName('FilesOne')[0];

        var otmpImgOne = document.getElementsByClassName('tmpImg_one')[0];
        //图片所有的数据集合
        var oFile = [];

        //多上传框多图上传
        for(var i = 0;i < oFileItem.length;i++)
        {
            oFileItem[i].onchange = function()
            {
                var reader = new FileReader();
                //如果选中文件进行data:image/png;base64 转码
                if(this.files.length > 0) reader.readAsDataURL(this.files[0]);
                reader.onload = function()
                {
                    //资源加载完成后进行结果数据填充
                    oFile.push(this.result);
                    otmpImg.innerHTML+='<img width="100" height="100" src="'+this.result+'">';
                }
            };
        }

        //单上传框上传多图
        oFileone.onchange = function()
        {
            var reader = new FileReader();
            //如果选中文件进行data:image/png;base64 转码
            if(this.files.length > 0) reader.readAsDataURL(this.files[0]);
            reader.onload = function()
            {
                //资源加载完成后进行结果数据填充
                oFile.push(this.result);
                otmpImgOne.innerHTML+='<img width="100" height="100" src="'+this.result+'">';
            }
        };
        //提交事件
        oDiv.onclick=function()
        {
            console.log(oFile);
        };
    };
</script>
</html>
标签: none

非特殊说明,本博所有文章均为博主原创。

评论啦~