在按钮单击事件上通过 Ajax 上传文件并发布表单答案

【问题标题】：Post form with a file upload by Ajax on Button click event在按钮单击事件上通过 Ajax 上传文件并发布表单
【发布时间】：2018-11-20 03:05:06
【问题描述】：

这是我的表格。在这种形式中，我有一些文本框和文件上传来上传图像并将其发送到后端。一旦用户点击保存按钮，我想同时发送图像数据和文本框数据。

<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 + struts。

【问题讨论】：

您的input 文件没有名称
我已将输入更改为但它仍然不起作用。
问题不在于id。是name。如果你的input没有name属性，就不会和表单的数据一起传递
我添加了它。还是不行。（名称=“文件输入”）。我的控制台仍然显示与以前相同的数据 (hiddenIdTxt=1000&passwordTxt=343&repeatPasswordTxt=434)。
尽量不序列化表单，看看success上收到的html是什么

标签： javascript jquery ajax input bootstrap-4

【解决方案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,

【讨论】：

【解决方案2】：

不要序列化表单在您的数据中使用它： new FormData(this); 还将您的代码更改为 $("#profileModalForm").on('submit', function()) 其余部分，不要为变量分配任何内容

【讨论】：