boostrap-fileinput文件上传
##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属性一致
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)