批量处理1——文件的上传（bootstrap+Ajax+SSM）
批量处理2——Java花式处理EXCEL
批量处理3——Excel文件导出
批量处理4——java处理压缩文件
Java知多少——相对路径和绝对路径
HTTP知多少——Content-disposition（文件下载）
1. bootstrap实现前端上传模板
上传文件
<div id="batchModal" class="modal w600 fade" tabindex="-1" role="dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">批量操作</h4></div>
<div class="modal-body">
<div class="w600">
<h4>一.请按照文件模版格式准确导入文件：</h4>
<a href="./batch/downTemplate" target="_Blank">下载文件模板</a>
<h5>注意事项：</h5>
<ul>
<li>按EXCEL模版填写数据，不可私自删除列和修改列名；</li>
<li>必填项不可删除且必须填写；</li>
<li>单次最大支持100笔。</li></ul>
<h4>二.请选择要导入的数据文件：</h4>
<form id="batchForm" action="">
<input type="file" name="XXX" id="batchFile" class="file-loading" style="display:none" onchange="$('#batchFilename').val($(this).val());" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<div class="input-group col-md-7">
<input id="batchFilename" class="form-control filename" type="text" />
<a class="btn btn-default btn-sm input-group-addon" onclick="$('input[id=batchFile]').click();">
<i class="fa fa-file-image-o"></i>选择文件</a>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button id="batchButton" type="button" class="btn green" onclick="batchSubmit()">上传</button></div>
</div>
</div>.modal.w600 { width: 600px; margin-left: -300px; }
1. 文件上传框（原生）
原生上传框
将原生上传框隐藏显示，style="display:none"。
2. 只显示特定的文件
在<input type="file" accept="xxx">中设置accept属性。
将Input标签和icon图标整合在一起。
4. click事件和change事件
上面说到，我们将<input type="file">隐藏后，如何操作它？
- 使用
onclick="$('input[id=batchWithdrawFile]').click();"事件，点击后其实掉起的是<input type="file"> - 选择文件后，如何将选择后的文件显示在
<input type="text"/>上呢？使用onchange="$('#batchFilename').val($(this).val());"写入。
显示效果
2. Ajax交互
使用FormData实现文件的上传。使用FormData在构造对象的时候，把表单的对象作为一个参数放进去，就可以了。然后FormData，就会得到这个表单对象里面的所有的参数，甚至我们在表单中，都不需要声明enctype ="multipart/form-data" ，就可以直接提交。
2.1 获取上传文件名
<input type="file" id="batchFile">
var fileName = new String($('#batchFile').val());
2.2. 获取上传的文件流
2.2.1 若是HTML代码中采用form表单，并指定enctype="multipart/form-data"时
1. HTML代码：
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
2. js代码：
$.ajax({
url: '/upload',
type: 'POST',
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
})
3. 需要注意的几点：
-
processData设置为false。因为data值是FormData对象，不需要对数据做处理。 -
<form>标签添加enctype="multipart/form-data"属性。 -
contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。 - 上传后，服务器端代码需要使用从查询参数名为
file获取文件输入流对象，因为<input>中声明的是name="file"。
2.2.2 若是没有form表单以及enctype="multipart/form-data"属性
1. HTML代码：
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
2. js代码：
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false
})
3. 需要注意的几点：
-
append()的第二个参数应是文件对象，即$('#file')[0].files[0]。 -
contentType也要设置为'false'。 - 从代码
$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。
注意事项：
使用FormData提交的时候，注意表单提交的是Request payload。后台需要特殊处理的。比如在SpringMVC中，可以采用下面的配置。
<!-- 配置nultipartresolver,注意：id名必须这样写，不然会报错 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 默认编码 -->
<property name="defaultEncoding" value="utf-8"/>
<!-- 文件大小最大值 -->
<property name="maxUploadSize" value="10485760000"/>
<!-- 内存中的最大值 -->
<property name="maxInMemorySize" value="40960"/>
</bean>
2.3 HTTP请求中 request payload 和 formData 区别？
FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的。如果是
application/x-www-form-urlencoded的话，则为formdata方式，如果是application/json或multipart/form-data的话，则为request payload的方式。
HTTP请求中 request payload 和 formData 区别？
2.3.1 FormData格式
在servlet中，可以通过request.getParameter(name)的形式来获取FormData表单参数。
<script>
var obj = {
"merchId": merchId,
"orderId": orderId,
};
$('.btn').click(function() {
$.ajax({
url: 'www.example.com',
type: 'POST',
dataType: 'json',
data: obj,
success: function(d) {
}
})
});
</script>
post提交格式
2.3.2 payload格式
Content-Type: application/json 或者 multipart/form-data格式。
文件上传格式
对于文件上传需要进行特殊处理，即在Spring-mvc.xml配置文件中增加multipartResolver配置。
源码
//批量上传提交
function batchSubmit() {
var self = $('#batchButton');
if (self.hasClass("disabled")) return;
/*获取上传的文件名*/
var fileName = new String($('#batchFile').val());
/*文件校验*/
if (fileName == null || fileName == '') {
layer.alert("请选择文件!", {icon: 2});
return;
}
if (!fileName.endWith(".xlsx") && !fileName.endWith(".xls")) {
layer.alert("请选择EXCEL文件!", {icon: 2});
return;
}
/*使用FormData获取上传的文件*/
var formData = new FormData();
formData.append("XXX", document.getElementById("batchFile").files[0]);
$.ajax({
url: "./batchFile/upload",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function (data) {
if (data.code == '200') {
layer.confirm('上传成功！', {
btn: ['开始信息校验', '删除原文件']
}, function () {
/*上传到服务器上开始文件校验*/
$.ajax({
type: "POST",
url: "./batchFile/validateFile",
data: null,
contentType: 'application/json;charset=utf-8', //设置请求头信息
dataType: "json",
beforeSend: function () {
layer.msg("数据校验中。。。", {icon: 1, time: -1, shade: 0.4});
},
success: (function (json) {
/*文件校验成功，返回成功笔数和失败笔数*/
if (json.code == 200) {
layer.closeAll();
var data = json.data;
$("#successCount").html(data.success);
$("#errorCount").html(data.error);
/*提供失败文件下载的功能*/
$("#downloadErrorFile").attr("href", "./batchFile/errorDownload?type=ERRORFILE");
$('#batchResultModal').modal('show');
} else {
layer.msg(json.message, {icon: 2, time: 2000, shade: 0.4});
}
}),
error: function (json) {
layer.closeAll();
}
});
}, function () {
layer.alert('删除成功！', {icon: 1});
});
} else {
layer.alert(data.message, {icon: 2});
}
layer.closeAll('loading');
self.removeClass("disabled");
},
error: function () {
layer.closeAll('loading');
layer.alert("上传失败！", {icon: 2});
self.removeClass("disabled");
},
beforeSend: function () {
layer.load(2, {shade: 0.4});
self.addClass("disabled");
}
});
}
后台代码：
public String upload(@RequestParam("file") MultipartFile file,
@RequestParam("desc") String desc, HttpServletRequest request) {
if (!file.isEmpty()) {
System.out.println("desc : " + desc);
try {
System.out.println("path : " + path);
File destFile = new File("file/" + file.getOriginalFilename());
System.out.println(" 真实路径 ： " + destFile.getAbsolutePath());
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
throw new MyUserException();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
