Передача файла в форме ajax

154

13 января 2018, 02:51

Есть два отчета. В первом форма содержит текстовые значения. Во втором форма содержит текстовые значения и оператор прикрепляет файл.

Код формы.

<form action="<%=Constants.LINK_INTERNAL_PREFIX %>reports/fetch/<%=entry.get("id") %>" method="POST"
                    class="form-inline-report col-md-8" id="fetch-report" 
                    enctype="multipart/form-data">

... код для вставки файла

<% if (entry.get("use_file").equals("true")) { %>
            <input id="fetch-file-input" class="fileinput" name="fetch-file-input" type="file" />
            <div id="errorBlock" class="help-block"></div>

...

<input value="Send" type="submit">
        </form>

Код js

$(function() {
    $("#fetch-report").submit(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $.ajax({
            type : 'POST',
            url : $(this).attr('action'),
            data : $('#fetch-report').serialize(),
            success : function(data) {
                $('#results').html(data);
            },
        });
    });
});

При отправки отчета 1 все отрабатывает. При отправки отчета 2 ошибка от сервера - ERROR UPLOADING FILE 01/12/2018 18:23:21 [EROR] ? javax.servlet.ServletException: org.apache.tomcat.util.http.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded; charset=UTF-8

как прикрутить в js возможность отправки файла? мне нужно на ajax.

Answer 1

Пробовали использовать FormData?

var formData = new FormData();
formData.append('input_name', $('#input_name').val());
formData.append('file', $('#file')[0].files[0]);
jQuery.ajax({
     url: '/upload',
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     type: 'POST',
     success: function(response) {
         console.log(response);
     }
});