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)); } }

 

公眾號