TP框架配合jquery进行3种方式的多图片上传

用的TP5.1框架+jquery

一 使用form表单方式进行多图片上传

html代码：

 <form action="../admin/admin/cs" enctype="multipart/form-data" method="post">
       <input type="file" name="image[]" /> <br>
       <input type="file" name="image[]" /> <br>
       <input type="file" name="image[]" /> <br>
       <input type="button" value="上传" id="imgbtn"/>
</form>

　　../admin/admin/cs的PHP代码：

public function cs()
{
    // 获取表单上传文件
    $files = request()->file('image');

    $file_path = ENV::get('root_path') . 'public/ab';

    !file_exists($file_path) && mkdir($file_path, 0755, true);

    foreach($files as $file){

        //move后面加个''，代表使用图片原文件名，不用则生成随即文件名可
        $info = $file->move($file_path, '');

        if(!$info) echo $file->getError();
    }
}

 

 

二 使用file的多文件上传属性进行多图片上传

html代码：

<input type="file" accept="image/*" multiple="multiple" onchange="upload(this)"/>

 jquery代码：

let fd = new FormData();

function upload(_this) {

    let filelist = _this.files;

    let l = filelist.length;
　　
　　//循环将文件全部追加到fd中
    for(i = 0; i < l; i++) fd.append("image[]", filelist[i]);

    $.ajax({
        type: "POST",
        url: "../admin/admin/cs", //这个PHP代码还是上面那个
        data: fd,
        processData : false,
        contentType : false,
        success: function(res){
            console.log(res);
        }
    });
}

　　

我选了3个文件，分别是03.jpg     04.jpg      05.jpg

 

 

 

选好之后显示3个文件，文件夹中也成功添加了3个对应的文件，我帮你们看了下，确实是刚才选择的那3张图片

 

 

 

三 利用多个file类型input进行ajax无刷新上传

html代码：

<input type="file" accept="image/*"  onchange="upload(this)"/>
<input type="file" accept="image/*"  onchange="upload(this)"/>
<input type="file" accept="image/*"  onchange="upload(this)"/>
<input type="button" id="btn" value="上传">

query代码：

    let fd = new FormData();

    function upload(_this) {
　　　　　//上面是多个文件，这里是一个文件，所以在files后面加个[0]
        fd.append("image[]", _this.files[0])
    };

    $('#btn').click(() =>{
        $.ajax({
            type: "POST",
            url: "../admin/admin/cs", //还是之前那个PHP代码
            data: fd,
            processData : false,
            contentType : false,
            success: function(res){

                console.log(res);
            }
        });
    })

　　

 

 

 

四 这是我在平时项目开发中使用过的，现在进行一个总结，希望能帮到各位