jQuery: отправить форму на изменение

Question

Я пытаюсь отправить форму с элементом поля, когда пользователь нажимает кнопку. Я использую функцию change, которая вызывается после выбора файла. Проблема заключается в том, что данные формы передаются без полевых данных. Как я могу заставить его отправить форму после установки данных поля?

Этот код работает нормально, если я его называю submit вместо change.

<form method="POST" action="public/index.php/students/edit/49" accept-charset="UTF-8" id="fileform" enctype="multipart/form-data"> 
    <input type="button" onclick="document.getElementById('fileupload').click(); return false;" value="UPLOAD CV/RESUME" class="add" /> 
    <input type="file" id="fileupload" style="visibility: hidden;" /> 
</form> 

<script> 
$('#fileupload').change(function() 
{ 
    var formData = new FormData($(this)[0]); 
    var request = $.ajax({ 
     type: "POST", 
     processData: false, 
     contentType: false, 
     url: "{{URL::action('StudentController@addDocument')}}", 
     data: formData, 
    }); 

    request.done(function(msg) { 
     console.log(msg); 
    }); 

    request.fail(function(jqXHR, textStatus) { 
     console.log(textStatus); 
    }); 
}); 

</script> 

Answer 1

Вы можете попробовать

$.fn.serializefiles = function() { 
    var obj = $(this); 
    /* ADD FILE TO PARAM AJAX */ 
    var formData = new FormData(); 
    $.each($(obj).find("input[type='file']"), function(i, tag) { 
     $.each($(tag)[0].files, function(i, file) { 
      formData.append(tag.name, file); 
     }); 
    }); 
    var params = $(obj).serializeArray(); 
    $.each(params, function (i, val) { 
     formData.append(val.name, val.value); 
    }); 
    return formData; 
}; 

затем в функции AJAX

var request = $.ajax({ 
    type: "POST", 
    processData: false, 
    contentType: false, 
    url: "{{URL::action('StudentController@addDocument')}}", 
    data: $('#fileform').serializefiles(), 
}); 

Вы хотите загрузить файл или несколько файлов по AJAX, вы должны написать функцию выше

Answer 2

this в $('#fileupload').change(...) относится к входному элементу, formData ожидает форму ele Мент, попробуйте следующее:

$('#fileupload').change(function() { 
    var formData = new FormData(this.form); 

    ... 

}); 

также необходимо добавить атрибут name к введенному файла.

Запрос тогда выглядит следующим образом:

... 
Content-Disposition: form-data; name="file"; filename="FILE_NAME" 
Content-Type: CONTENT_TYPE 
...