Как через AJAX передать $_FILES?

Question

[Влад]

У меня есть форма, которая обрабатывается на ajax. Помогите, пожалуйста, если я добавлю в форму input для загрузки изображений, то как дописать javascript, чтобы он в строке data: отправлял к php файлу также и массив $_FILES... я очень плох в javascript(

<input type="file" name="addmyfile[]" multiple="true">

<form class='add' enctype="multipart/form-data" method='post'>
    <span class='close'>X</span>
    <div class='title'></div>
    <span>Имя: <input name='name' type="text" class="required" /></span>
    <textarea name='text' class="required"></textarea>
    <input type="submit" value='Отправить' />
    <div class='info'></div>
</form>

$("body").on("submit", '.add', function(){
            var form = $('.add').attr("id");
            var data = $(this).serialize();
            var url = document.location.pathname;
            $.ajax({
                type: "POST",
                url: "engine/ajax/my_addotziv.php",
                data: (data+'&url=http://multmult.ru/'+url+'&form='+form),
                success: function(data)
                {
                    $(".add").css('display','none');
                    $(".darkbg").css('display','none');
                    alert(data);
                }
            });
            return false;
        })

Answer 1

[Павел Александров]

Под вашу задачу можно так:

$('.add').on('submit', function(){
    var formData = new FormData(this);
    $.ajax({
          type: "POST",
          url: "engine/ajax/my_addotziv.php",
          data:  formData,
          processData: false,
          contentType: false,
          success: function(data){
            // -- code ---
          }
     });
    return false;
});

И смотрим доки по FormData https://developer.mozilla.org/ru/docs/Web/API/FormData

Comments

[Максим Волков]

спасибо!

Answer 2

[Adamos]

Кусок рабочего кода для медитации:

var data = new FormData();
data.append('file', this.files[count]);
$(form).find('input[type!=file]').each(function () {
  data.append(this.name, this.value);
});
$.ajax({
  'url': ajax_path,
  'type': 'POST',
  'data': data,
  'contentType': false,
  'processData': false,
  'dataType': 'json',

Comments

[Влад]

это вы отдельно передачу FILES для ajax сделали, а как совместить отправку обычных текстовых Input с FILES?

[Adamos]

Влад: вам в другом ответе даже ссылку на документацию дали.

Answer 3

[devian3000]

Никак. Ajax не передаёт файлы.
Лучше найти библиотеку которая это так или иначе делает.
с помощью iframe или как-либо ещё.

Библиотеку выбирайте под задачи.

Comments

[Артем Каюн]

Передает, еще как. Даже прогресс бар можно выводить).

[devian3000]

Пруф в студию =)
Всё что делается делается через сторонние библиотеки, а они это решение костыляют.
Новые фичи, поддерживаются пока далеко не во всех браузерах.

Поэтому прогресс бар и прочее, опять же не напрямую.