Ajax игнорирует файл

558

07 февраля 2017, 22:54

Проект на Laravel. Есть форма с загрузкой файла. При отправке через Ajax в реквесте просто нет поля с файлом, при этом если передавать без Ajax`a то все нормально. Может кто-то с таким сталкивался? Форма:

<div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> </button>
            <h4 class="modal-title">{{trans('secret.add_work')}}</h4>
        </div>
        <div class="modal-body">
            {{Form::open(array('url' => 'secret/addWork', 'files' => true, 'id' => 'addWork'))}}
            {{ csrf_field() }}
            <div class="form-group row">
                <div class="col-md-4 text-right">{{Form::label('title_rus', trans('secret.title_rus'), array('class' => 'control-label'))}}</div>
                <div class="col-md-6">{{Form::text('title_rus', '', array('class' => 'form-control'))}}</div>
            </div>
            <div class="form-group row">
                <div class="col-md-4 text-right">{{Form::label('title_eng', trans('secret.title_eng'), array('class' => 'control-label'))}}</div>
                <div class="col-md-6">{{Form::text('title_eng', '', array('class' => 'form-control'))}}</div>
            </div>
            <div class="form-group row">
                <div class="col-md-4 text-right">{{Form::label('url', trans('secret.work_url'), array('class' => 'control-label'))}}</div>
                <div class="col-md-6">{{Form::text('url', '', array('class' => 'form-control'))}}</div>
            </div>
            <div class="form-group row">
                <div class="col-md-4 text-right">{{Form::label('images[]', trans('secret.work_images'), array('class' => 'control-label'))}}</div>
                <div class="col-md-6">{{Form::file('images[]', array('multiple'=>true))}}</div>
            </div>
            <div class="form-group row">
                <div class="col-md-4 text-right">{{Form::label('text-rus', trans('secret.text_rus'), array('class' => 'control-label'))}}</div>
                <div class="col-md-6">{{Form::textarea('text-rus', '', array('class' => 'form-control', 'rows' => 7))}}</div>
            </div>
            <div class="form-group row">
                <div class="col-md-4 text-right">{{Form::label('text-eng', trans('secret.text_eng'), array('class' => 'control-label'))}}</div>
                <div class="col-md-6">{{Form::textarea('text-eng', '', array('class' => 'form-control', 'rows' => 7))}}</div>
            </div>
            <div class="form-group row">
                <div class="col-md-4 text-right">{{Form::label('tags', trans('secret.tags'), array('class' => 'control-label'))}}</div>
                <div class="col-md-6">{{Form::textarea('tags', '', array('class' => 'form-control', 'rows' => 2))}}</div>
            </div>
            <p class="label-success" style="display: none"></p>
            <p class="label-danger" style="display: none"></p>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
        </div>
        {{ Form::close() }}
    </div>

Ajax:

$(document).ready(function(){
    $( "#addWork" ).submit(function( event ) {
        event.preventDefault();
        var $form = $( this ),
            data = $form.serialize(),
            url = "secret/addWork";
        $.ajax({
            type: 'post',
            url: url,
            data: data,
            success: function (data) {
                //stuff
            },
            error: function (data) {
                //error stuff
                }
            })
        });
});

Answer 1

Загрузка файлов на сервер осуществляется сложнее чем просто поля формы.

Ранее мы извращались с submitом формы из iframe, это был самый простой вариант, с тех пор браузеры немного шагнули вперёд.

С помощью FileReader можно получить содержимое файла и добавить его как обычное поле в base64, например.

С помощью FormData всё ещё проще:

VanillaJs:

var form = document.getElementById('addWork');
var formData = new FormData(form);
var request = new XMLHttpRequest();
request.open("POST", url);
request.onload = function(e) {
  if (request.status == 200) console.info('Uploaded');
  else console.error(request.status);
};
request.send(formData)

VanillaJs(fetch):

fetch(url, {method: "POST", body: formData})
  .then(function(response){/*...*/});

jQuery:

var formData = new FormData(form);
$.ajax({
  url: url,
  type: 'POST',
  data: formData,
  enctype: 'multipart/form-data',
  contentType: false, // Указание jQuery не трогать Content-type
  processData: false, // Указание jQuery не трогать данные
  success: function (response) {
    //
  }
});

Answer 2

Upload файлов через ajax делается немного иначе, чем простая форма. Я загружаю файл с помощью объекта FormData:

var formElem = document.getElementById('ID формы');
var formData = new FormData(formElem);
// тут я использую jquery для получения файла. У меня один input с типом file, потому выглядит именно так
var fileData = $(this).find('input[type=file]')[0].files[0];
// Добавляю файл в параметры формы
formData.append('audioFile[]', fileData);