檔案上傳前後端
阿新 • • 發佈:2018-11-21
##1.使用boostrap-fileinput外掛
原生的檔案上傳不太好像,所有使用boostrap-fileinput外掛進行檔案上傳
引入
<base href="/sendPayMail/" target="_self"> <script src="static/jquery/jquery-2.1.3.min.js"></script> <script src="static/bootstrap/js/bootstrap.min.js"></script> <script src="static/bootstrap-fileinput/js/fileinput.min.js"></script> <script src="static/bootstrap-fileinput/js/locales/zh.js"></script> <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="static/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" type="text/css">
html頁面
<input type="file" name="file2" id="txt_file2" multiple class="file" data-show-preview="false"/>
初始化上傳檔案框
//初始化上傳檔案框
$("#txt_file2").fileinput({
language: 'zh', //設定語言
uploadUrl: "salaryOper/uploadFile.do",
showUpload: false,
enctype: 'multipart/form-data'
});
##2.使用Query.form.js進行表單提交
Query.form.js是一個form外掛,支援ajax表單提交和ajax檔案上傳
<form id="formMail" action="salaryOper/sendMail.do" class="form-horizontal" enctype="multipart/form-data" method="post"> <div class="form-group"> <label for="txt_file2" class="col-sm-2 control-label">上傳工資條模板</label> <div class="col-sm-10"> <input type="file" name="file2" id="txt_file2" multiple class="file" data-show-preview="false"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-success">傳送郵件</button> </div> </div> </form> $(function(){ $("#formMail").ajaxForm(function(data){ //處理表單提交後,後端返回給前端的資訊 layer.alert(data); }); });
3.使用CommonsMultipartFile類獲取前端上傳的檔案
@RequestMapping(value = "/sendMail.do",produces="text/html;charset=UTF-8")
@ResponseBody
public String sendMail(@RequestParam("file2") CommonsMultipartFile file2, HttpServletRequest request) {
}
注意@RequestParam裡面的名字要和表單中上傳檔案框的name屬性一致