form提交时,ajax上传文件并更新到<input>中的value字段

小傻 2019-06-26

想利用jsp做上传时,为了交互采用ajax上传附件,因此表单被我设计成这样
<form onsubmit="return FileUploadFunction(this)" enctype="multipart/form-data"
                      method="post">              
                    <c:forEach var="wjsInfo" items="${requestScope.resumeInfo.wjs}">
                        <div class="layui-upload-drag upload-area">
                            <input type="text" style="display:none" name="wjData" value="" class="wjData"/>
                            <input type="text" style="display:none" name="fileName" class="fileName">
                        </div>
                    </c:forEach>
                    <div class="row resume-submit" style="padding-top:30px;">
                        <input type="submit" style="float: none" class="button btn-save-next btn-nex" value="上传附件">
                    </div>
    </form>
    <script>
      function FileUploadFunction(mdata) {
        if (VailForm(mdata)) {
            $.ajax({
                type: "post",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                url: "${pageContext.request.contextPath}/resume/saveFile",
                data: $(mdata).serialize(),
                success: function (data) {
                    alert(data.info);               
                }
            });
        }
        return false;
    }
    </script>
利用按钮commit出发表单提交,提交时返回false并执行ajax,模拟表单提交上传到后台

相关推荐

mmywcoco / 0评论 2020-06-06