PHP簡單實現異步多文件上傳並使用Postman測試提交圖片

    雖然如今不少都是使用大平臺的對象存儲存放應用中的文件，但有時小項目仍是能夠使用之前的方式上傳到和程序一塊兒的服務器上，強調一下這裏是小衆需求，大衆能夠使用阿里雲的OSS，騰訊的COS，七牛的巴拉巴拉xxxxxx……

    

Postman使用

1. 打開後，選擇"body"->"form-data"，key懸浮的時候選擇「File」, 而後value會出現一個文件按鈕。

2. 本地的上傳方法測試一下打印一下。

3. 以上使用Postman測試文件上傳接口就通了，下面就寫一個異步上傳的效果。

 

多文件異步上傳

1. 前端

<!--圖片上傳-->
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span> 圖片:</label>
                <div class="formControls col-xs-8 col-sm-3">
                    <input id="img" type="file" multiple="true" onchange="uploadImgs(this,event)"/>
                    <div id="img_box">
                        <foreach name="img_upload.img_arr" item="data">
                        <div class="img_item">
                            <img id="ImgPr" class="hid" src="{$data.url}"/>
                            <span class="del hid" onclick="closeImg(this)">X</span>
                        </div>
                        </foreach>
                    </div>

                    <input id="hid_img" type="hidden" name="img" value="{$img_upload['img_str']}"/>
                </div>
            </div>
            <!--圖片上傳-->



// 多圖片上傳觸發事件
        function uploadImgs(_this,event) {
            // 實例FormData
            var data = new FormData();
            for (var i = 0; i < event.target.files.length; i++) {
                var files = event.target.files[i];
                // 批量添加文件
                data.append('file[]', files);
            }
            // 異步提交
            ajaxUpload(data);
        }

        function ajaxUpload(data) {

            $.ajax({
                url: '{$ajax_upload_url}',
                type: "POST",
                data: data,
                dataType: 'json',
                processData: false,// *重要,確認爲false
                contentType: false,
                // beforeSend: function () {
                //     console.log(11111);
                // },
                success: function (res) {
                    if(res.error == 1) {
                        alert(res.msg);
                        return;
                    }else {
                        console.log(res);
                        var imgArr = $("#hid_img").val();
                        $.each(res.data,function(index,data) {
                            // 追加顯示
                            $("#img_box").append(
                                '<div class="img_item">'+
                                    '<img id="ImgPr" class="hid" src="'+data.path+'"/>'+
                                    '<span class="del hid" onclick="closeImg(this)">X</span>'+
                                '</div>'
                            );
                            if(!imgArr) {
                                imgArr = data.path;
                            }else {
                                imgArr += ","+data.path;
                            }

                            // 追加提交數據
                            //$(".formControls").append('<input id="hid_img" type="hidden" name="img[]" value="'+data.path+'"/>');
                        })
                        $("#hid_img").val(imgArr);
                    }
                },
                error: function (res) {
                    alert('異步上傳圖片接口出錯');
                    return;
                }
            });
        }

 

2. PHP部分就是和同步方式同樣。

/*
     * 圖片上傳
     * */
    public function ajaxUpload() {
        $upload = new \Think\Upload();// 實例化上傳類
        $upload->maxSize   =     3145728 ;// 設置附件上傳大小 3145728
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 設置附件上傳類型
        $upload->rootPath  =     './Uploads/'; // 設置附件上傳根目錄
        $upload->savePath  =     'repair/'; // 設置附件上傳（子）目錄
        // 上傳文件
        $info   =   $upload->upload();
        if(!$info) {// 上傳錯誤提示錯誤信息
            $this->ajaxReturn(array("error"=>1,"msg"=>$upload->getError(),"data"=>array()));
        }else{// 上傳成功
            $uploadFile = array();
            foreach($info as $key=>$value) {
                $uploadFile[] = array(
                    "path" => ltrim($upload->rootPath,'.').$value['savepath'].$value['savename'],
                    "ext" => $value['ext'],
                );
            }

            $this->ajaxReturn(array("error"=>0,"msg"=>"上傳成功","data"=>$uploadFile));
        }
    }

 

公衆號