Laravel - 图片文件上传器提交保存按钮而不是上传图片

Question

我在我的项目中使用 Laravel-5.8。我要上传图片，然后点击提交按钮将图片和其他文本字段保存到数据库中。

控制器

public function create()
{
    $countries = ConfigCountries::all();
    return view('organization.companies.create')->with('countries', $countries);
}

public function store(Request $request)
{
    try {

            $orgStartDate = Carbon::parse($request->org_start_date);          

            $arr = [
                'organisation_code'     => $request->organisation_code,
                'organisation_name'     => $request->organisation_name,
                'website'               => $request->website,
                'org_decription'        => $request->org_description,
                'total_employees'       => $request->total_employees,
                'registration_number'   => $request->registration_number,
                'org_start_date'        => $request->$orgStartDate,
                'phone_number'          => $request->phone_number,
                'secondary_phone'       => $request->secondary_phone,
                'email'                 => $request->email,
                'secondary_email'       => $request->secondary_email,
                'address1'              => $request->address1,
                'address2'              => $request->address2,
                'country_id'            => $request->country_id,
                'created_by'            => Auth::user()->id,
                'created_at'            => date("Y-m-d H:i:s"),
                'is_active'             => 1,
            ];

            if ($request->org_image != "") {
                $org_image = time() . '_' . $request->org_image->getClientOriginalName();
                $request->org_image->move('storage_files/companies/profile/', $org_image);
                $arr['org_image'] = 'storage_files/companies/profile/' . $org_image;
            }

            $company = OrgCompany::create($arr);

            $company->save();
            Session::flash('success', 'Company is created successfully');
            return redirect()->route('organization.companies.index');                

    } catch (Exception $exception) {

        return back()->withInput()
            ->withErrors(['unexpected_error' => 'Unexpected error occurred while trying to process your request.']);
    }
}

查看

    <div class="card-body">
        <form action="{{ route("organization.companies.store") }}" method="post class="form-horizontal" enctype="multipart/form-data">
            {{csrf_field()}}
                <div class="text-center">
                  <input type="image" class="profile-user-img img-fluid img-circle"
                       src="{{asset('theme/adminlte3/dist/img/company_logo.png')}}"
                        id="wizardPicturePreview" title="" width="150">
                  <input type="file"  name="picture" id="wizard-picture" class="" hidden>
                  <h4 class="profile-username text-center">Click On Image to Add Logo</h4>
                </div>
                            
                    <span style="color:blue;"><h4 class="box-title"><b>Contact Information</b></h4></span>
                    <hr class="m-t-0 m-b-40">  
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="control-label text-right col-md-3"> Phone No.</label>
                                        <div class="col-md-9 controls">
                                            <input  type="text" name="phone_number" placeholder="Enter Company Phone no. here" class="form-control" value="{{old('phone_number')}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="control-label text-right col-md-3"> Alternative Phone No.</label>
                                        <div class="col-md-9 controls">
                                            <input  type="text" name="secondary_phone" placeholder="Enter Alternative  Phone no. here" class="form-control" value="{{old('secondary_phone')}}">
                                        </div>
                                    </div>
                                </div>
                                <!--/span-->
                            </div>

                        <hr>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-offset-3 col-md-9">
                                            <button type="submit" class="btn btn-primary">Add Company</button>
                                            <button type="button" onclick="window.location.href='{{route('organization.companies.index')}}'" class="btn btn-default">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
        </form>
    </div>

        <script>
            $(document).ready(function(){
                $("#wizard-picture").change(function(){
                    readURL(this);
                });
            });
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
                    }
                    reader.readAsDataURL(input.files[0]);
                }           }
            $("input[type='image']").click(function() {
                $("input[id='wizard-picture']").click();
            });
            $(".form-control").keypress(function(e) {
                if (e.which == 13) {
                    e.preventDefault();
                    return false;
                }
            });

        </script>

问题是没有点击保存提交按钮，当我点击图片文件上传器时，它会重定向到索引页面而不会将图片上传到屏幕。

我该如何解决这个问题？

谢谢

Answer 1

图像的输入类型是将图像定义为提交按钮的一种方式，因此单击图像实际上就是提交表单。您可以将图像更改为常规的 <img> 标记或更改单击处理程序以防止像这样的默认操作

$("input[type='image']").click(function(e) {
     e.preventDefault();
     $("input[id='wizard-picture']").click();
});

另外，请注意，您在打开表单的行中有错字。 method="POST 之后没有右引号，这可能是页面在提交时重定向的原因

Answer 2

可能是因为<form>起始标签中缺少方法的右引号