Javascript 在按钮单击事件中使用Ajax上传文件发布表单

这是我的表格。在这个表单中，我有一些文本框和一个文件上传，用于上传图像并将其发送到后端。我希望在用户单击“保存”按钮后，同时发送图像数据和文本框数据

<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>

但如果我在文件上传中选择了一个图像，它就会发布数据。我在浏览器控制台的参数中看到的是

hiddenIdTxt=1000&passwordTxt=abcd&repeatPasswordTxt=abcd

如何使用ajax post发送选定的图像数据？我使用jquery和引导。我的后端是java+struts。

不要序列化表单 在您的数据中使用：新表单数据（this）；

---

同时将代码更改为$（“#profileModalForm”）。在（'submit'，function（））上，跟随其余部分，不要给变量赋值。您正试图通过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,

---

您的

文件输入

没有名称我已将输入更改为，但仍然无效。问题不在于

id

。是

名称

。如果您的

输入

没有属性

名称

，它将不会随添加的formI数据一起传递。还是不行。（name=“fileInput”）。我的控制台仍然显示与以前相同的数据（hiddenIdTxt=1000&passwordTxt=343&repeatPasswordTxt=434）。请尝试不序列化表单，并查看在

success

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