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和bootstrap。我的后端是java + struts。

Answer 1

不要序列化表单在您的数据中使用它：new FormData（this）; 也将你的代码更改为$（“＃profileModalForm”）。on（'submit'，function（））跟随其余部分，不要为变量分配任何东西

Answer 2

您正尝试通过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,

在按钮点击事件上发布由Ajax上传文件的表单

2 个答案: