javascript - 关于laravel图片上传ajax的问题

Question

它给我一个错误:

Call to a member function getClientOriginalExtension() on null

这是我的代码

表格:

<form id="regForm" role="form" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Title</label>
                            <input type="text" class="form-control" name="title" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Type</label>
                            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">File input</label>
                            <input type="file" name="image" id="exampleInputFile">
                        </div>
                    </div><!-- /.box-body -->

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>

这是我的ajax脚本

<script type="text/javascript">
    $(document).ready(function(){
        //alert($("#email").val());
    });
    $("#regForm").submit(function(){
        var selector = $(this);

        var form = selector.serializeArray();
        $.ajax({
            url: "{{URL::to('admin/snl_add_post')}}",
            type: "POST",
            data: form,
            dataType: "json",
            success: function(data){
                if(!data.success)
                {
                    $.each(data.errors, function(key, value){
                        selector.find("input[name="+key+"]").attr({"style":"border:1.5px solid red;"});
                    });
                }
                else
                {
                    setTimeout(function(){

                        // Move to a new location or you can do something else
                        window.location.href = "{{URL::to('stickers_and_labels')}}";

                    }, 3000);
                }
            }
        });
        return false;
    });
</script>

和我的 Controller

public function snl_add_post(){
        $response = array();

        $rules = array(
            'title' => 'required'

        );

        $validator = Validator::make(Input::all(), $rules);

        if($validator->fails()){

            $response["errors"] = $validator->messages();

            $response["success"] = FALSE;

            $response["msg"] = "Invalid Inputs";
        }
        else
        {
            $careers = new Careers;

            $careers->title = Input::get('title');

            $destinationPath = 'images/snl/';

            $extension = Input::file('image')->getClientOriginalExtension();

            $fileName = rand(11111,99999).'.'.$extension;

            Input::file('image')->move($destinationPath, $fileName);

            $careers->img_path = 'images/snl/'.$filename;

            $careers->save();

            if($careers){

                $response["success"] = true;
                $response["msg"] = "Success";

            }else{

                $response["success"] = false;
                $response["msg"] = "May error";

            }
        }



        return Response::json($response);
    }

我认为我的错误是在 ajax 中，但我不太确定。 任何见解将不胜感激。

Answer 1

在您的调用中使用 Serialize 将只有文本内容，要获得文件及其内容，您应该使用 formData

首先为您的表单命名并使用下面的代码

$("form[name='uploader']").submit(function(e) {
    var formData = new FormData($(this)[0]);

    $.ajax({
       url: "{{URL::to('admin/snl_add_post')}}",
        type: "POST",
        data: formData,
        async: false,
        success: function (msg) 
        {
        },
        cache: false,
        contentType: false,
        processData: false
    });

    e.preventDefault();
});

在这之后尝试在你的 Controller 中 print_r(Input::all()); 你应该也能得到图像的细节。

注意:

我已经给出了基本用法，您可以根据需要更改上面的 jQuery。即，使用 settimeout 和其他需要的选项。