Грешки при получаване на качен файл и данни от формуляр от формуляр с помощта на AJAX и публикуване в бекенда на Laravel

Работя върху формуляр, който има различни полета за въвеждане, включително поле за качване на файлове. Когато потребителят натисне бутона за изпращане, искам да изпратя формуляра чрез AJAX POST заявка до бекенда, който е PHP Laravel. Проблемът е, че данните не се изпращат според очакванията. Сериализирам данните, след което публикувам директно, но не съм сигурен дали това е правилният начин.

Оформление на формуляр

<form method="POST" action="#" id="form" enctype="multipart/form-data" accept-charset="UTF-8">
    <!-- CSRF TOKEN-->
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <!-- END CSRF TOKEN-->
    <div class="form-line registar2 love">
        <input id="passport" type="text-area" class="form-input" name="passport" value="{{ old('passport') }}" autofocus>
            <label> Passport</label>
            <div class="error-label"></div>
            <div class="check-label"></div>
             @if ($errors->has('passport'))
                <span class="help-block">
                    <strong>{{ $errors->first('passport') }}</strong>
                </span>
            @endif
   </div>

    <div class="form-line registar2 move" >
      <input id="kra" type="text-area" class="form-input" name="kra" value="{{ old('kra') }}" required>
      <label>KRA Pin *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('kra'))
        <span class="help-block">
            <strong>{{ $errors->first('kra') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 love {{ $errors->has('residence') ? ' has-error' : '' }}">
      <input id="residence" type="text-area" name="residence" class="form-input" required>
      <label>Current Residential Address *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('residence'))
        <span class="help-block">
            <strong>{{ $errors->first('residence') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 move {{ $errors->has('documents') ? ' has-error' : '' }}">
      <input id="documents" type="file" class="form-input" name="documents" value="{{ old('documents') }}" multiple>
      <div class="error-label"></div>
      <div class="check-label"></div>
      @if ($errors->has('documents'))
          <span class="help-block">
            <strong>{{ $errors->first('documents') }}</strong>
          </span>
      @endif
    </div>

    <button type="submit"id="pay"> Proceed to Payament</button>


  </form>

AJAX кодът се извиква при изпращане на формуляра

<script>
    // Get the form via its id
    var form = $('#form');

    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    var inputs = $("#form :input");
    console.log(inputs);

    var entries = inputs.serialize();

    console.log(entries);

    $.ajax({
        type: "POST",
        //url in the routes file to post the data
        url: "saveAdd",
        contentType: "application/x-www-form-urlencoded",
        data: entries,
        success: function(response){
          alert(response);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

</script>

Насочва файла на контролера към POST към

Route::any( '/saveAdd', 'B2CController@saveAdd')->name('b2c.saveAdd');

Контролерен файл в Laravel Backend

    public function saveAdd(Request $request){

        dd($request->all());
    }

person Pweb    schedule 22.10.2018    source източник
comment
можете ли да ни покажете какъв отговор се връща от сървъра? Можете да намерите това, като натиснете f12 и отидете в раздела мрежа и след това като погледнете заявката „saveAdd“.   -  person Junaid Ahmad    schedule 22.10.2018
comment
@JunaidAhmad Получавам масив от всички данни с изключение на файла, който е качен от потребителя array:5 [ "_token" => "RMDvaDBbCuQA3aGl5M4BUfJKwASyBIzQpLun8o3p" "passport" => "897897987" "kra" => "09709709709" "residence" => "u8768768768" ]   -  person Pweb    schedule 22.10.2018
comment
@JunaidAhmad Всички входове се извличат добре, с изключение на файла, качен от потребителя   -  person Pweb    schedule 22.10.2018
comment
Виждам. Мисля, че този отговор ще реши проблема ви. stackoverflow.com/questions/5392344/   -  person Junaid Ahmad    schedule 22.10.2018
comment
Проблемът трябва да се дължи на contentType. Който трябва да е от няколко части в случай на файлове.   -  person Junaid Ahmad    schedule 22.10.2018


Отговори (1)


При функцията за изпращане на формуляр тя извлича всички данни от формуляра, включително файла. ключовата дума let се използва като локален обхват.

$( "form" ).submit(function( event ) {
    let form = $( this )
    let formData = new FormData(form[0]);
    event.preventDefault();
    console.log(formData);

    $.ajax({
        type: "POST",
        data:formData,
        processData: false,
        contentType: false,
        url: "saveAdd",
        success: function(response){
            alert(response);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});
person DPS    schedule 22.10.2018