Laravel 上传表单返回 json

Question

我仍然是 laravel 的初学者并坚持使用上传 ajax 表单：它仍在发送显示在浏览器中的 json 响应，而不是像我期望的那样停留在当前页面上。 我只想得到一个我可以在当前页面上使用的 json 响应。

这是我的看法

<form action="/Project/UploadDocumentProject" enctype="multipart/form-data"  method="post"  id ="form0">

    {{ csrf_field() }}

    <input id="ProjectID" name="ProjectID" type="hidden" value="{{$Project->id}}">

    <div class="form-group">
        <input name="DocumentFile" id="DocumentFile" class="form-control" type="file" >
    </div>


    <div class="form-group">
        <button id ="test" class="btn btn-success upload-image" type="submit">Upload</button>
    </div>

</form>

这是我的 ajax 请求

$('#form0').on("submit", function(e){
    e.preventDefault();
    $(this).ajaxForm(options);

    var options = { 
        complete: function(response) 
        {
            if($.isEmptyObject(response.responseJSON.error)){
                $("input[name='DocumentFile']").val('');
                alert('Image Upload Successfully.');
            }else{
                printErrorMsg(response.responseJSON.error);
            }
        }
    };

});

这是我的控制器

public function UploadDocumentProject (Request $Request)
{
    $ProjectID=$Request->get('ProjectID');
    $filename = $Request->DocumentFile->getClientOriginalName();

    $Request->DocumentFile->storeAs('/public/projects/'.$ProjectID.'/files',$filename);

    return response()->json(['success'=>'done']);

}

这是我的路线

Route::post('/Project/UploadDocumentProject','ProjectController@UploadDocumentProject');

我已经尝试在我的表单中指定 data-ajax="true" data-ajax-method="POST"，但是即使在我的 ajax 请求中指定数据字段时，请求也不会考虑文件输入。 谁能帮助我？

谢谢！ :)

Answer 1

在使用.ajaxForm(options)之前，您需要指定options。 我会在加载后直接配置它，而不是在提交处理程序中

重做的 JS 代码：

$.ready(function(){
    var options = { 
        complete: function(response)
        {
            if($.isEmptyObject(response.responseJSON.error)){
                $("input[name='DocumentFile']").val('');
                alert('Image Upload Successfully.');
            }else{
                printErrorMsg(response.responseJSON.error);
            }
        }
    };
    $(this).ajaxForm(options);
}};

如果在没有目标后端 php 应用程序的情况下对其进行测试 - 但发送了包含文件的请求。因此，如果您遇到其他问题，请告诉我

Answer 2

终于找到了如何制作正确的ajax文件格式

这是我的做法

查看

<form action="{{ route('Project/UploadDocumentProject') }}"  method="post" id ="form0" enctype="multipart/form-data" >

        {{ csrf_field() }}
        <input id="ProjectID" name="ProjectID" type="hidden" value="{{$Project->id}}">



        <div class="form-group">
          <input name="fileAjax" id="fileAjax" class="form-control" type="file">test</textarea>  
        </div>

        <div class="form-group">
          <button id ="test" class="btn btn-success upload-image" type="submit" >Upload</button>
        </div>


</form>

Ajax 请求

var files;


                 $('input[type=file]').on('change', prepareUpload);


                 function prepareUpload(event)
                 {
                    files = event.target.files;
                  }
                  $("#form0").submit(function (e) {
                    e.preventDefault();
                    var form = $("#form0");
                    var data = new FormData();

                    $.each(files, function(key, value)
                       {
                            data.append(key, value);
                        });

                    var $ProjectID = $('#ProjectID').val();

                     data.append('ProjectID', $ProjectID);
                    $.ajax({
                        type: "post",
                        url: form.attr('action'),
                        data: data,
                        processData: false,
                        contentType: false,
                        cache: false,
                        enctype: 'multipart/form-data',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },


                        success: function (data) {
                            //some code here...
                        }
                    });
                });

控制器

 public function UploadDocumentProject (Request $Request) {
$path = $Request->file('0')->store('document');
$filename = $Request->file('0')->getClientOriginalName();
$Request->file('0')->storeAs('/public/projects/files',$filename);

  //some code here...

return Response::json(array('var1'=>$val1 ,...));

}

路线

Route::post('Project/UploadDocumentProject', ['as'=>'Project/UploadDocumentProject','uses'=>'ProjectController@UploadDocumentProject']);