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

前端之家收集整理的这篇文章主要介绍了form提交时,ajax上传文件并更新到<input>中的value字段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
想利用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,模拟表单提交上传后台
原文链接:https://www.f2er.com/ajax/160385.html

猜你在找的Ajax相关文章