laravel 5.5 如何ajax上傳文件？

請(qǐng)問(wèn)一下laravel用異步如何上傳圖片？我操作的方法總是不對(duì)！

js代碼：

 onAjax(formObj,dataType)
    {
        var that = this;
        var form = $(formObj)[0];
        var data = this._formToData(form);//自己封裝的函數(shù)，將前端的數(shù)據(jù)打包
        var url = form.action;
        var type = form.method;
        $.ajax({
            sync : false,
            url : url ,
            data : data ,
            type : type ,
            dataType : dataType ? dataType : 'json',
            success(r)
            {
                console.log(r);
            },
            complete(r)
            {
                var response = r.responseJSON;
                var status = r.status;
                if(status === 200)
                {
                    return that.showNotifies(response.msg,'success');
                }
                that._getResponseError(response.errors);
                return that.showNotifies(response.message,'danger');
            }
        });
        return false;
    },

后臺(tái)代碼

public function edit($id,Request $request)
    {
        $this->_checkIsLoginUser($id);
        $user = User::find($id);

        $path = $request -> file('avatar') -> store('upload/avatar');
        $data = $request -> input();
        $data['avatar'] = $path;
        unset($data['_token']);

        $this->validate($request, [
            'firstName' => 'nullable|max:10',
            'lastName' => 'nullable|max:10',
            'contact' => 'nullable|integer',
            'birthday' => 'nullable|date|max:10',
            'address' => 'nullable|string|max:200',
            'city' => 'nullable|string|max:50',
            'country' => 'nullable|string|max:50',
            'postal' => 'nullable|integer',
            'aboutMe' => 'nullable|string|max:255',
            'avatar' => 'image'
        ]);

        $user -> info = json_encode($data);
        $res = $user -> save();
        if($res)
        {
            return $this->_toAjax(__('notices.update.success'));
        }
        return $this->_toAjax(__('notices.update.danger'));
    }

回答

編輯回答

夢(mèng)若殤

js代碼：

            $(function () {
                $("#file_upload").change(function () {
                    uploadImage();
                })
            })
            function uploadImage() { //  判斷是否有選擇上傳文件
                var imgPath = $("#file_upload").val();
                if (imgPath == "") {
                    alert("請(qǐng)選擇上傳圖片！");
                    return;
                }
                //判斷上傳文件的后綴名
                var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
                if (strExtension != 'jpg' && strExtension != 'gif'
                    && strExtension != 'png' && strExtension != 'bmp') {
                    alert("請(qǐng)選擇圖片文件");
                    return;
                }
                // var formData = new FormData($('#art_form')[0]);
                var formData = new FormData();
                formData.append('fileupload',$('#file_upload')[0].files[0]);

                $.ajax({
                    type: "POST",
                    cache: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "/admin/upload",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log(data);
                        $('#art_thumb').attr('src', data);
                        $("input[name='map']").val(data);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("上傳失敗，請(qǐng)檢查網(wǎng)絡(luò)后重試");
                    }
                });
            }
        </script>

后端代碼：

//文件上傳

public function upload(Request $request)
{
    $file = $request->file('fileupload');
 
   
    //如果是有效的上傳文件
    if($file->isValid()) {
     //            獲取原文件的文件類(lèi)型
        $ext = $file->getClientOriginalExtension();    //文件拓展名
         //        生成新文件名
        $newfile = md5(date('YmdHis').rand(1000,9999).uniqid()).'.'.$ext;

         //       將文件上傳到本地服務(wù)器
        //將文件從臨時(shí)目錄移動(dòng)到制定目錄
        $path = $file->move(public_path().'/uploads',$newfile);

        //        將上傳文件的路徑返回給客戶(hù)端
        return '/uploads/'.$newfile;
    }
}

2018年4月17日 10:35