ajax上传-基于html5 FormData的批量文件上传

参考：https://www.cnblogs.com/imwtr/p/5924042.html
转自：https://blog.csdn.net/sinat_34492035/article/details/80477858

不使用FormData，直接用 <input type="file" name="file" multiple> 也可以实现批量上传。本例是ajax方式多个文件同时上传，也可以基于FormData采用ajax循环上传多个文件。更多功能可通过理解下面的原理自行扩展。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{
            list-style:none;
        }
        ul{
            width:700px;
            border:2px solid red;
            padding:10px;
        }
        .clearfix:after{
            display: block;
            content:'';
            overflow: hidden;
            visibility: hidden;
            clear: both;
            height:0;
        }
        .content ul li{
            float:left;
            width:100px;
            height:100px;
            margin:0 10px;
            border:1px solid #ccc;
        }
        .addFile{
            background:url("../img/icon12.png") no-repeat;
            background-position: center center;
        }
        #attach{
            width:100%;
            height:100%;
            opacity:0;
        }
    </style>
</head>

<body>
    <form action="formData_test.php" id="form">
        <div class="content">
            <ul class="clearfix ul-box">
                <li class="addFile">
                    <input type="file" id="attach"  multiple require />
                </li>
            </ul>
        </div>
        <input type="text" name="name"/>
        <input type="text" name="age"/>
        <input type="text" name="sex"/>
        <input type="button" value="上传" class="subBtn"/>
    </form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    //定义一个数组 把文件数组的值给新数组  对新数组进行操作  然后把新数组传递给后台
    var curFiles = [];
    $("#attach").change(function(){
        var fileArr = $(this)[0].files;
        Array.prototype.push.apply(curFiles, fileArr);
//      var fileArr = this.files;
        console.log(fileArr);
        //这里展示的话  还是用fileArr
        for(var i=0;i<fileArr.length;i++){
            console.log(fileArr[i]);
            var item = fileArr[i];
            var abc=$("<li class='showf'><p style='overflow:hidden;text-overflow:ellipsis; '>文件名:"+item.name+"</p>"+
                    "<p>大小："+(item.size/1024).toFixed(2)+"KB</p></li>");
            $(".ul-box").prepend(abc);
        }
//      fileArr.map(function(item,index,arr){
//          var abc=$("<li><p>文件名:"+item.name+"</p>"+
//                  "<p>大小："+parseInt(item.size/1024)+"KB</p></li>");
//          $(".ul-box").prepend(abc);
//      })

})  
$(".ul-box").on("click",".showf",function(){
    var index = $(".showf").index($(this));
    alert(index);
    var name = $(this).find("p").eq(0).html();
    console.log(curFiles);
//  curFiles = curFiles.filter(function(file) {
//      return file.name != name;
//  });
    curFiles.splice(index,1)
    console.log(curFiles);

    $(this).remove();
})
$(".subBtn").click(function(){
    // 构建FormData对象
    var fd = new FormData($('#form')[0]);
    for (var i = 0, j = curFiles.length; i < j; ++i) {
        fd.append('attach[]', curFiles[i]);
    }

    for(var pair of fd.entries()) {
       console.log(pair[0]+ ', '+ pair[1]); 
    }

    $.ajax({
        url: 'formData_test.php',
        type: 'post',
        data: fd,
        processData: false,
        contentType: false,
        success: function(rs) {
            console.log(rs);
        },
        error: function(err) {
        }
    });
})
</script>

</html>

formData_test.php源码：

<?php
$files = $_FILES['attach'];
var_dump($files);
?>

2019-10-08

王新阳

ajax上传-基于html5 FormData的批量文件上传