form表單提交且接口回調顯示提交成功


前端:
<form method="post" enctype="multipart/form-data" id="formSubmit">
      <div class="row">
           <div class="col-lg-12" style="padding-left:25px;padding-top: 5px">
                <label>請選擇文件</label>
                <input type="file" name="file" title="點擊選擇文件" multiple="" accept="*/*" class="form-control">
           </div>
      </div>
      <div class="row">
           <div style="padding-left:25px;padding-top:10px">
                <input type="submit" class="btn btn-primary">
           </div>
      </div>
</form>

 

JS:
$('#formSubmit').submit(function (event) {
        //首先驗證文件格式
        var fileName = $(this).find("input[name=file]").val();
        if (fileName === '') {
            alert('請選擇文件');
            return;
        }
        // mulitipart form,如文件上傳類
        var formData = new FormData(this);
        $.ajax({
            async: false,
            type: "POST",
            url: "/upload",
            data: formData,
            dataType: "JSON",
            mimeType: "multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) {
                if (data.success) {
                    layer.alert("上傳成功")
                } else {
                    layer.alert(data.error)
                }
            }
        });
        return false;
    });

  js代碼的最后需要return false 防止表單重復提交,刷新頁面。

java:
 @RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
    @ResponseBody
    public SimpleAjaxResponse uploadSingleFile(HttpServletRequest request, Model model) {
        try {
            DefaultMultipartHttpServletRequest httpServletRequest = (DefaultMultipartHttpServletRequest) request;
            MultipartFile multipartFile = httpServletRequest.getFile("file");
            return new SimpleAjaxResponse(true);
        } catch (Exception e) {
            LOGGER.error(e.getMessage(), e);
            e.printStackTrace();
            return new SimpleAjaxResponse("上傳出錯了");
        }

    }

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM