效果圖:
:
思路:前臺 使用bootstrap-fileInput插件,將excel文件上傳到服務器對應地址,然後後臺java讀取服務器對應地址的這個excel文件,然後將數據上傳到數據庫(使用MyBatis框架)
前端:
html代碼:
<input id="uploadFile" type="file" name='file'class='file' accept=".xls,.xlsx"
data-show-upload="false" data-show-cancel="false" data-show-preview="false" >
bootstrap-fileInput初始化js代碼:
其中uploadUrl參數是後臺controller的方法地址
initFileUpload('uploadFile');
function initFileUpload(idName){
$("#" + idName + "").fileinput({
language: 'zh', //設置語言
uploadUrl: '../../gis/poi/upload', //上傳的地址
allowedFileExtensions : ['xls', 'xlsx'],
uploadAsync : false,
browseOnZoneClick: true,
dropZoneEnabled : true,
showPreview : true,
enctype: 'multipart/form-data',
showCaption: true,//是否顯示標題
browseClass: "btn btn-primary", //按鈕樣式
dropZoneEnabled: false,
showPreview: true,
uploadExtraData: function(type) { //額外參數的關鍵點
var obj = {};
obj.type = $('input:radio[name="type"]:checked').val();
return obj;
},
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
})
}
點擊上傳按鈕後 執行的js代碼
//出發fileInput上傳方法
$('#uploadFile').fileinput('upload');
//上傳成功回調方法
$('#uploadFile').on('filebatchuploadsuccess', function(event, filestack, extraData) {
var data = filestack.response;
if (data.code == "200") {
alert("上傳成功")
}
});
後端:
controller層:
@PostMapping("/upload")
@ResponseBody
public Map<String, Object> upload(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
Map<String, Object> map = new HashMap<>();
gisPoiService.importData(request,file);
map.put("code",200);
return map;
}
service實現層:
/**
* 導入數據
*
* @param id
* @return
*/
@Override
public R importData(HttpServletRequest request, MultipartFile file) {
List<String> lst = this.upLoadFile(request, file);
this.insertData(request, lst);
return CommonUtils.msg("導入完成");
}
// 上傳文件到服務器
private List<String> upLoadFile(HttpServletRequest request, MultipartFile file) {
List<String> lst = new ArrayList<String>();
String fileName = file.getOriginalFilename();
String[] sArray = fileName.split("\\.");
Date dNow = new Date();
SimpleDateFormat ft = new SimpleDateFormat("yyyyMMddHHmmss");
String dt = ft.format(dNow);
String uploadFileName = sArray[0] + "_" + dt + "." + sArray[1];
String filePath = request.getServletContext().getRealPath("poiUploadedFile/") + uploadFileName;
File dest = new File(filePath);
try {
file.transferTo(dest);
} catch (IOException e) {
}
lst.add(filePath);
lst.add(dt);
return lst;
}
// 插入數據
// 1.新建
// 0.追加
private void insertData(HttpServletRequest request, List<String> lst) {
String strTime = lst.get(1);
String strServerFilePath = lst.get(0);
String type = request.getParameter("type");
String tableName1 = this.getLatestVerisonName();
this.batchSaveGisPoi(tableName1, strServerFilePath);
}
/**
* 批量新增
*
* @param gisPoi
* @return
*/
public R batchSaveGisPoi(String strTableName, String filePath) {
int count = 0;
List<GisPoiEntity> lstGisPoiEntity = this.readExcel(filePath);
for (int i = 0; i < lstGisPoiEntity.size(); i++) {
GisPoiEntity gispoi = lstGisPoiEntity.get(i);
Map<String, Object> args = new HashMap<String, Object>();
args.put("tabName", strTableName);
args.put("name", addyinhao(gispoi.getName()));
args.put("x", addyinhao(gispoi.getX()));
args.put("y", addyinhao(gispoi.getY()));
args.put("xzqdm", addyinhao(gispoi.getXzqdm()));
args.put("xzqmc", addyinhao(gispoi.getXzqmc()));
args.put("address", addyinhao(gispoi.getAddress()));
args.put("city", addyinhao(gispoi.getCity()));
args.put("typeName", addyinhao(gispoi.getTypeName()));
count += gisPoiMapper.saveFromTable(args);
}
return CommonUtils.msg(count);
}
實體entity層:
實體層,我就不貼了, 貼出來的代碼的目的是爲了給大家有個參考,需要大家改一改,才能在自己的項目上使用的。
mapper層:
mapper.xml:
<insert id="saveFromTable" parameterType="hashmap" statementType="STATEMENT">
INSERT INTO ${tabName} (
name,
x,
y,
address,
city,
xzqmc,
xzqdm,
type
)
VALUES (
${name},
${x},
${y},
${address},
${city},
${xzqmc},
${xzqdm},
(select macro_id from sys_macro where sys_macro.name=${typeName})
)
</insert>