Отправить форму с загрузкой файла Ajax на событие нажатия кнопки

Question

Это моя форма.В этой форме у меня есть несколько текстовых полей и файл загрузки, чтобы загрузить изображение и отправить его на сервер.Я хочу отправить данные изображения и данные текстового поля одновременно, когда пользователь нажмет кнопку сохранения.

<form id="profileModalForm" name="profileModalForm" onsubmit="return false;" autocomplete="off" >
          <div class="modal-body">
            <div class="row margin-top10 text-center">
                <div class="col-md-12 col-lg-12 col-sm-12">
                            <input id="hiddenIdTxt" type="text" name="hiddenIdTxt" class="display-none" value="<%=user.getId()%>"/>

                            <div class="row margin-top10">
                                <img class="img-responsive" style="display:block; margin:auto;" alt="<%out.println(user.getUsername());%>" 
                                src="data:image/jpg;base64,<%out.println(user.getEmployee().getProfilePicture());%>" height='200' width='200'>
                            </div>

                            <div class="row" style="display:block; margin:auto;">
                                <p><b><%= user.getEmployee().getFullName()%></b></p>
                            </div>

                            <div class="row form-group margin-top10">
                                <div class="col-sm-12 col-md-12 col-lg-12 margin-top10">
                                    <label style="text-align: left; float: left;" class="control-label">New Password</label>
                                    <input id="passwordTxt" name ="passwordTxt" class="form-control"  maxlength="20" placeholder="(Optional)"/>
                                </div>
                            </div>     

                            <div class="row form-group margin-top10">
                                <div class="col-sm-12 col-md-12 col-lg-12 margin-top10">
                                    <label style="text-align: left; float: left;" class="control-label">Repeat New Password</label>
                                    <input id="repeatPasswordTxt" name ="repeatPasswordTxt" class="form-control"  maxlength="20" placeholder="(Optional)"/>
                                </div>
                            </div>   
                             <div class="row form-group">
                                 <div class="col-sm-12 col-md-12 col-lg-12 margin-top10">
                                    <label style="text-align: left; float: left;" class="control-label">File input</label>
                                    <input type="file" accept="image/*" class="form-control-file" id="inputFile" name="inputFile" aria-describedby="fileHelp">
                                </div>
                             </div>              

                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-flat" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-success btn-flat" onclick="saveProfileEditBtn();">Save changes</button>
          </div>
      </form>

При событии нажатия кнопки «Отправить» я вызываю функцию ajax для загрузки данных формы.

function saveProfileEditBtn() {
    var data = $('#profileModalForm').serialize();
    $.ajax({
        cache: false,
        url: 'SaveProfileModalData.ws',
        type: "POST",
        data: data,        
        contentType: false,
        processData: false,
        success: function (html) {
            $('#notificationArea').html(html);
        }
    }
    );
}  

Но событие, которое я выбираю при загрузке файла, делает его, чтобы опубликовать его данные.Что я вижу в параметрах консоли браузера:

hiddenIdTxt=1000&passwordTxt=abcd&repeatPasswordTxt=abcd

Как я могу отправить выбранные данные изображения, используя сообщение ajax?Я использую jquery и начальную загрузку.Моя задняя часть - Java + распорки.

Answer 1

Вы пытаетесь опубликовать форму, состоящую из нескольких частей, через ajax.

Попробуйте получить данные формы

 var form = $('#fileUploadForm')[0];

 var formdata = new FormData(form);

Установить processData: false

$.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "--Post url here--",
        data: formdata,
        processData: false,  // Important!
        contentType: false,
        cache: false,

Answer 2

Не сериализуйте форму Используйте это в своих данных: новые FormData (это);также измените свой код на $ ("# profileModalForm"). on ('submit', function ()) следуйте остальным, не назначайте ничего переменной