AJAX 提交form表单以及文件上传

项目中经常遇到页面提交数据，然而又不想当前页面刷新，这个就需要ajax了。

下面来说说如何简洁的提交一个form表单

1、HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div >
    <div class="pull-left">
       <form action="${ctx }/ajax/fileUpload" method="post" enctype="multipart/form-data" id="form2">
            <input class="btn btn-success btn-sm" type="file" name="uploadFile" id="uploadFile"/>
            <input  type="hidden" name="flag" value="keyword" id="hidden_flag"/>
            <!-- <button id="submitFile_btn" class="btn btn-success btn-sm" type="submit">添加</button> -->
        </form>
    </div>
    <div class="col-md-4">
        <button id="submitFile_btn" class="btn btn-success btn-sm" type="button" onclick="submitFile()">添加</button>
    </div>
</div>


</body>
</html>

2、js代码

<script type="text/javascript">
function submitFile(){
    var form =new FormData(document.getElementById("form2"));
    openEnable();
    //$("#form2").submit();
    $.ajax({
           url: '${ctx }/ajax/fileUpload',
           data: form,
           type: 'post',
           dataType: 'json',
           async: true,
           processData:false,
           contentType:false,
           beforeSend: function () {
                   // 禁用按钮防止重复提交
                   $("#submitFile_btn").text("更新中..");
                   $("#submitFile_btn").attr({ disabled: "disabled" });
               },
           success: function (data) {
               if (data.success == true) {
                   window.location.href = '${ctx }/admin/userList';
               } 
               if(data.success == false) {
                   openfailed();
                   window.location.href = '${ctx }/admin/userList';
               }
           },
            complete: function () {
                $("#submitFile_btn").text("批量添加");
                $("#submitFile_btn").removeAttr("disabled");
            }
       });
}
</script>

使用

var form =new FormData(document.getElementById("form2"));
减少了js代码中的
var a = $("#a").val();

var b = $("#b").val();

var c = $("#c").val();

var d = $("#d").val();

而且避免了有时会获取不到file文件（个人遇到过，不是绝对）

3、java 后台接受文件

使用：

public @ResponseBody String fileUpload(HttpServletRequest request,HttpServletResponse response,String flag) {

boolean multipart = new CommonsMultipartResolver(request.getSession().getServletContext()).isMultipart(request);
if (multipart) {

　　MultipartHttpServletRequest multiPartRequest = (MultipartHttpServletRequest) request;
　　MultipartFile file = multiPartRequest.getFile("uploadFile");

　　InputStream inputStream = file.getInputStream();

　　}

注意：使用MultipartHttpServletRequest 接受文件需要先用红色代码进行判断是否存在，存在之后再强转 HttpServletRequest 为 MultipartHttpServletRequest

posted on 2018-10-09 15:36 XT_小嘎阅读(493) 评论(0) 编辑收藏举报