SpringMVC+jquery实现文件上传教程
上传文件有很多种方法,这里主要讲依赖commons-io.jar和commons-fileupload(版本没有太大要求,能实现功能即可)实现,楼主用的是commons-fileupload-1.3.1.jar和commons-io-2.4.jar。
主pom.xml配置
[html] view plain copy
<dependency>
<groupid>commons-io</groupid>
<artifactid>commons-io</artifactid>
<version>${commons.io.version}</version>
</dependency>
<dependency>
<groupid>commons-fileupload</groupid>
<artifactid>commons-fileupload</artifactid>
<version>${commons.fileupload.version}</version>
</dependency>
除了引入上述两种jar包,还可以在spring配置文件中添加id为multipartresolver的bean,用于控制文件上传的大小,
[html] view plain copy
<bean id="multipartresolver" class="org.springframework.web.multipart.commons.commonsmultipartresolver">
<property name="defaultencoding" value="utf-8" />
<property name="maxuploadsize" value="10240000" />
<!-- 设置在文件上传时允许写到内存中的最大值,以字节为单位计算,默认是10240 -->
<!-- 但是经实验,上传文件大小若小于此参数,则不会生成临时文件,故改为2048 -->
<property name="maxinmemorysize" value="2048" />
</bean>
准备工作做好后,开始编写前端代码。前端用form表单,enctype一定要为"multipart/form-data",否则无法实现文件的上传。
[html] view plain copy
<form:form id="file_form"
action="${ctx}/enduser/upload"
enctype="multipart/form-data" method="post">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="blanktitle">
导入excel
<!-- 提示 -->
</h4>
</p>
<p class="modal-body" id="modal-body">
<p class="row">
<p class="form-horizontal">
<p class="form-group ">
<label class="col-lg-4 col-sm-4 control-label">文件选择:</label>
<p class="col-lg-8 col-sm-8">
<input type="file" name="file" id="file_input" />
</p>
</p>
</p>
</p>
<p class="row">
<p class="form-horizontal">
<p class="form-group ">
<label class="col-lg-4 col-sm-4 control-label">文件上传:</label>
<p class="col-lg-8 col-sm-8">
<input type="submit" value="上传" id='upfile-btn'>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</form:form>
form提交时通过jquery校验文件上传的格式,楼主这里实现上传excel文件,所以校验excel格式
[html] view plain copy
$("#file_form").submit(
function() {
//首先验证文件格式
var filename = $('#file_input').val();
if (filename === '') {
alert('请选择文件');
return false;
}
var filetype = (filename.substring(filename
.lastindexof(".") + 1, filename.length))
.tolowercase();
if (filetype !== 'xls' && filetype !== 'xlsx') {
alert('文件格式不正确,excel文件!');
return false;
}
}
});
仅校验是不够的,还需要用ajaxsubmit进行假提交,即不真正提交文件到服务器,而是只在后台获取上传的文件
[html] view plain copy
$("#file_form").submit(
$("#file_form").ajaxsubmit({
datatype : "json",
clearform: true,
success : function(data, textstatus) {
if (data.returncode == 1) {
console.log('上传文件成功');
alert("上传文件成功");
} else {
console.log('文件格式错误');
alert("文件格式错误");
}
return false;
}
});
return false;
});
后台通过form的action转发的url获取上传的文件,方法名和url同名,文件则是以multipartfile类型传递的
[java] view plain copy
/**
* /enduser/upload
* 导入excel
* @param request
* @throws exception
*/
@requestmapping(value="/upload",method= {requestmethod.post})
@responsebody
public string upload(@requestparam(value = "file") multipartfile file,httpservletrequest request) throws exception {
//判空
if(file.isempty()) {
return null;
}
logger.debug("原始文件名称:"+file.getname());
logger.debug("==========开始转换excel文件==========");
//multipartfile转换为file
file f = multiparttofile(file);
try {
enduserprovider.importexcel(f);
catch (exception e) {
logger.error("==========解析excel文件失败==========",e);
return "redirect:/enduser/list";
}
值得注意的是,文件通过multipartfile类型传到后台时,若文件为空,multipartfile不为空,而是用multipartfile.isempty()判空。
文件由multipartfile转为file后,由file得到文件的输入流is,通过workbookfactory创建workbook对象
[java] view plain copy
fileinputstream is = new fileinputstream(file);
workbook = workbookfactory.create(is);
is.close();
最后就是通过workbook对象得到sheet对象,然后得到excel的行和列,分别遍历行列进行文件的处理啦
[java] view plain copy
for(int i=0;i<workbook.getnumberofsheets();i++) {
//获取excel文件的第一个sheetsheet sheet = workbook.getsheetat(i);
//获取文件的行
int totalrows = sheet.getphysicalnumberofrows();
//循环excel行数
for (int r = 1; r < totalrows; r++) {
row row = sheet.getrow(r);
if (row == null){
continue;
}
//遍历列
for (int c = 0; c < totalcells; c++) {
cell cell = row.getcell(c);
//文件处理
}
}
}