1、jsp页面
<div class="widget-box transparent span-12">
<div class="widget-header widget-header-flat">
<h4>
<i class="icon-table"></i>离职待清偿列表
</h4>
<input type="hidden" id="idList" name="idList" value="${it.entity.idList}"/>
<button class="btn btn-success btn-small" id="importLeaveIdList"> 待查员工列表上传</button>
</div>
</div>
<script type="text/javascript" src="js/utils/query-params-uploader.js"></script>
<script>
var cc = new CCQueryParamsUploader.init();
cc.register({
btnId:"importLeaveIdList",
url:"postLoan/uploadEmployeeNum",
success:function(result){
var records = result.data;
var idList = [];
if(records!==undefined && records.length>0){
for(var index in records){
var record = records[index];
idList.push(record.employeeNum);
}
}
$("#idList").attr("value",idList);// 填充内容
alert("上传成功!");
},
failed:function(){
debugger;
console.log("上传失败!");
}
});
</script>
2、js控件:query-params-uploader.js
var CCQueryParamsUploader = {};
(function ($) {
var QueryParamsUploader = function () {
var dForm = '<form name="import-form" enctype="multipart/form-data" class="hidden">' +
'<input class="file" type="file" name="file"/>' +
'<input class="uploadBtn" type="submit" value="Upload" /></form>';
$(document.body).append(dForm);
};
QueryParamsUploader.prototype = {
register: function (params) {
if (params.btnId === undefined) throw "missing button id";
if (params.url === undefined) throw "missing request url";
var eForm = document.forms.namedItem("import-form"),
eFile = $(eForm).find(".file"),
eUploadBtn = $(eForm).find(".uploadBtn");
$("#" + params.btnId).on('click', function () {
eFile.trigger('click');
});
eFile.on('change', function () {
eUploadBtn.trigger('click');
});
eForm.addEventListener('submit', function (ev) {
if (window.FormData) {
var oData = new FormData(eForm);
var oReq = new XMLHttpRequest();
oReq.open("POST", params.url, true);
oReq.responseType = "json";
oReq.onload = function () {
if (oReq.status == 200) {
if (params.success !== undefined) {
params.success(oReq.response);
}
} else {
if (params.failed !== undefined) {
params.failed();
}
}
};
oReq.send(oData);
ev.preventDefault();
}
}, false);
}
}
CCQueryParamsUploader.init = QueryParamsUploader;
}(jQuery));
3、后台读取数据逻辑
@POST
@Path("/uploadEmployeeNum")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.APPLICATION_JSON)
public ApiResult uploadEmployeeNum(@Context HttpServletRequest req,
@FormDataParam("file") InputStream file){
List<CSVRecord> result = Lists.newArrayList();
try{
result = CSVUtils.parse(file, "utf-8");
}catch(IOException e){
e.printStackTrace();
}
ApiResult apiResult = new ApiResult();
apiResult.setData(result);
return apiResult;
}
public static List<CSVRecord> parse(InputStream file, String encoding) throws IOException {
String line;
List<CSVRecord> records = Lists.newArrayList();
BufferedReader br = new BufferedReader(new InputStreamReader(file, encoding));
while ((line = br.readLine()) != null) {
String[] raw = line.split(SEPARATOER);
String employeeNum = raw[0]; //只取csv文件中第一行数据,当日也可以取多个
if (StringUtils.isNotEmpty(employeeNum)) {
CSVRecord record = new CSVRecord();
record.setEmployeeNum(employeeNum);
records.add(record);
}
}
return records;
}