Although many of them use large platform objects to store application files, sometimes small projects can be uploaded to the server with the program in the same way as before, emphasizing that this is a small demand. The public can use Alibaba cloud OSS, Tencent COS, sanniu Barra xxxxx...

Postman use

1. After opening, select "body" - > "form data", select "File" when key is suspended, and then a File button will appear in value.

2. Test and print the local upload method.

3. You can use the Postman test file upload interface above, and write an asynchronous upload effect below.

Multi file asynchronous upload

1. front end

<!--Picture upload-->
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span> picture:</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>
            <!--Picture upload-->



// Multi image upload trigger event
        function uploadImgs(_this,event) {
            // Instance FormData
            var data = new FormData();
            for (var i = 0; i < event.target.files.length; i++) {
                var files = event.target.files[i];
                // Batch add files
                data.append('file[]', files);
            }
            // Asynchronous submission
            ajaxUpload(data);
        }

        function ajaxUpload(data) {

            $.ajax({
                url: '{$ajax_upload_url}',
                type: "POST",
                data: data,
                dataType: 'json',
                processData: false,// *Important, confirm as 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) {
                            // Additional display
                            $("#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;
                            }

                            // Append submission data
                            //$(".formControls").append('<input id="hid_img" type="hidden" name="img[]" value="'+data.path+'"/>');
                        })
                        $("#hid_img").val(imgArr);
                    }
                },
                error: function (res) {
                    alert('Error in asynchronous image upload interface');
                    return;
                }
            });
        }

2. PHP is the same as synchronization.

 /*
     * Picture upload
     * */
    public function ajaxUpload() {
        $upload = new \Think\Upload();// Instantiate upload class
        $upload->maxSize   =     3145728 ;// Set attachment upload size 3145728
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// Set attachment upload type
        $upload->rootPath  =     './Uploads/'; // Set attachment upload root directory
        $upload->savePath  =     'repair/'; // Set attachment upload (sub) directory
        // Upload files
        $info   =   $upload->upload();
        if(!$info) {// Upload error message
            $this->ajaxReturn(array("error"=>1,"msg"=>$upload->getError(),"data"=>array()));
        }else{// Upload success
            $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"=>"Upload success","data"=>$uploadFile));
        }
    }

official account