W moim projekcie używam Laravel-5.8. Chcę przesłać obraz i kliknij przycisk przesyłania, aby zapisać obraz i inne pola tekstowe w bazie danych.

Kontroler

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.']);
    }
}

widok

    <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>

image upload

Problem polega na tym, że bez klikania przycisku Zapisz i prześlij, gdy kliknąłem narzędzie do przesyłania plików graficznych, przekierowuje on do strony indeksu bez przesyłania obrazu na ekran.

Jak mam to rozwiązać?

Dzięki

0
mikefolu 16 grudzień 2019, 19:18

2 odpowiedzi

Typ wejściowy obrazu to sposób na zdefiniowanie obrazu jako przycisku przesyłania, więc kliknięcie obrazu w rzeczywistości powoduje wysłanie formularza. Możesz zmienić obraz na zwykły tag <img> lub zmienić moduł obsługi kliknięcia, aby zapobiec domyślnej akcji, takiej jak ta

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

Również uwaga, masz literówkę w wierszu, który otwiera formularz. Nie ma cudzysłowów zamykających po method="POST, co prawdopodobnie jest przyczyną przekierowania strony po przesłaniu

0
Alec Joy 16 grudzień 2019, 19:28
Kiedy zmieniłem to tak, jak radziłeś, nie jest już klikalne.
 – 
mikefolu
17 grudzień 2019, 00:00
Jeśli zmienisz tag, upewnij się, że aktualizujesz jQuery, aby pasowało, więc zamiast $('input[type=image]') powinno być teraz $('#wizardPicturePreview')
 – 
Alec Joy
17 grudzień 2019, 01:33

Może dlatego, że w tagu początkowym <form> brakuje zamykającego cudzysłowu metody

0
idk 16 grudzień 2019, 23:44