Как отправить фото или документы через ajax

318

16 июня 2018, 01:30

как можно сразу отправить файлы через ajax когда мы чтото закинули в Input type="file", мой скрипт почему то не срабатывают буду признателен за помощь

<form action="/profile/uploadFiles" method="POST" enctype="multipart/form-data" class="doc-upload-form js-form-uploadfile">
                                <button class="btn btn-info"
                                        type="button" onclick="document.getElementById('briefcaseFileUploader').click()">
                                    <i class="fa fa-plus"></i>
                                    {{ _('Add files') }}
                                </button>
                                <input type="file" name="files[]" multiple="multiple" id="briefcaseFileUploader" style="display: none;">
                                <button class="btn btn-info hide" type="submit">{{ _('Upload files') }}</button>
                            </form>
js:
$('#briefcaseFileUploader').change(function() {
        $('.js-form-uploadfile').submit(function(e) {
            e.preventDefault();
            var form = $(".js-form-uploadfile");
            $.ajax({
                url:'/profile/uploadFiles',
                data: form.serialize(),
                cache: false,
                contentType: false,
                processData: false,
                method: 'POST',
                type: 'POST',
                success: function(data) {
                    $('#ajax-loader').show();
                    if( typeof respond.error === 'undefined' ){
                        $('#ajax-loader').hide();
                    }
                }
            });
            return false;
        });
    });

Answer 1

Для реализации данной задумки - стоит воспользоваться FormData Что-то типа :

var fd = new FormData();    
fd.append( 'file', input.files[0] );
$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Answer 2

Совет дня: Не назначайте обработчики событий внутри других обработчиков событий.

$('#briefcaseFileUploader').change(function() {
  $('.js-form-uploadfile').submit();
});
$('.js-form-uploadfile').submit(function(e) {
  e.preventDefault();
  $.ajax({
    url:'/profile/uploadFiles',
    data: new FormData(this),
    cache: false,
    type: 'POST',
    success: function(data) {
      $('#ajax-loader').show();
      if( typeof data.error === 'undefined' ){
        $('#ajax-loader').hide();
      }
    }
  });
  return false;
});