雖然現在很多都是使用大平臺的物件儲存存放應用中的檔案，但有時小專案還是可以使用以前的方式上傳到和程式一起的伺服器上，強調一下這裡是小眾需求，大眾可以使用阿里雲的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));
        }
    }
 

 

公眾號

相關推薦