最近因为项目需要研究了下bootstrap fileinput的使用，来记录下这几天的使用心得吧。
前台html页面的代码
<form role="form" id="importFile" method="post" enctype="multipart/form-data"> <div class="row"> <div class="col-md-3" > <input type="radio" name="excelType" class="radio" id="station" value="station"><label for="station"> 参数1</label> </div> <div class="col-md-3 "> <input type="radio" name="excelType" class="radio" id="line" value="line"><label for="line"> 参数2</label> </div> <div class="col-md-3 "> <input type="radio" name="excelType" class="radio" id="pipeline" value="pipeline"><label for="pipeline"> 参数3</label> </div> <div class="col-md-3 "> <input type="radio" name="excelType" class="radio" id="jdj" value="jdj"><label for="jdj"> 参数4</label> </div> </div> <input id="excelFile" name="excelFile" class="file-loading" type="file" multiple accept=".xls,.xlsx" data-min-file-count="1" data-show-preview="true"> <br> </form>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
js进行插件的初始化和一些参数的设置
$("#excelFile").fileinput({ uploadUrl:"rest/import/importExcel",//上传的地址 uploadAsync: true, language : "zh",//设置语言 showCaption: true,//是否显示标题 showUpload: true, //是否显示上传按钮 browseClass: "btn btn-primary", //按钮样式 allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀 maxFileCount: 10,//最大上传文件数限制 uploadAsync: true, previewFileIcon: '<i class="glyphicon glyphicon-file"></i>', allowedPreviewTypes: null, previewFileIconSettings: { 'docx': '<i class="glyphicon glyphicon-file"></i>', 'xlsx': '<i class="glyphicon glyphicon-file"></i>', 'pptx': '<i class="glyphicon glyphicon-file"></i>', 'jpg': '<i class="glyphicon glyphicon-picture"></i>', 'pdf': '<i class="glyphicon glyphicon-file"></i>', 'zip': '<i class="glyphicon glyphicon-file"></i>', }, uploadExtraData: function() { var extraValue = null; var radios = document.getElementsByName('excelType'); for(var i=0;i<radios.length;i++){ if(radios[i].checked){ extraValue = radios[i].value; } } return {"excelType": extraValue}; } });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
注意： uploadExtraData函数中只能用原生JS来取值，不能用JQuery来获取值，此参数用来向后台传递附加参数，以方便处理，最简单的写法是：
uploadExtraData: { "excelType": document.getElementByID('id') }- 1
- 2
- 3
文件上传成功后的回调方法
$("#excelFile").on("fileuploaded", function(event, data, previewId, index) { alert("上传成功!"); $("#excelImport").modal("hide"); //后台处理后返回的经纬度坐标json数组， var array = data.response; console.dir(array); //jquery循环取经纬度坐标 $.each(array,function(index,latAndLon){ var lon = latAndLon.lon; var lat = latAndLon.lat; var point = new Point(lon, lat, map.spatialReference); var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle( SimpleMarkerSymbol.STYLE_CIRCLE).setColor( new Color([255,255,0,0.5])); var attr = {"address": "addressName" }; var infoTemplate = new esri.InfoTemplate("标题", "地址 :${address}"); var graphic = new Graphic(point,symbol,attr,infoTemplate); map.graphics.add(graphic); }); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
arcgis中点的定义的两种方法：
var point = new Point(lon, lat, new SpatialReference({ wkid: 4326 })); var point = new Point(lon, lat, map.spatialReference);- 1
- 2
后台Java处理，使用common fileupload插件来实现，此处限制只能上传excel 文件
public JSONArray importExcel(HttpServletRequest request, HttpServletResponse response) throws Exception { final String allowFileSuffix = "xls,xlsx"; Subject subject = SecurityUtils.getSubject(); String uname = (String) subject.getPrincipal(); String basePath = "D:" + File.separator + uname; File tmpDir = new File(basePath);// 初始化上传文件的临时存放目录 JSONArray jsonArry = new JSONArray(); if (!tmpDir.exists()) { tmpDir.mkdirs(); } // 检查输入请求是否为multipart表单数据。 if (ServletFileUpload.isMultipartContent(request)) { DiskFileItemFactory dff = new DiskFileItemFactory();// 创建该对象 dff.setRepository(tmpDir);// 指定上传文件的临时目录 dff.setSizeThreshold(1024000);// 指定在内存中缓存数据大小,单位为byte ServletFileUpload sfu = new ServletFileUpload(dff);// 创建该对象 // sfu.setFileSizeMax(5000000);//指定单个上传文件的最大尺寸 sfu.setSizeMax(10000000);// 指定一次上传多个文件的总尺寸 sfu.setHeaderEncoding("utf-8"); String type = null; List<FileItem> fileItems = new ArrayList<FileItem>(); try { fileItems = sfu.parseRequest(request); } catch (FileUploadException e1) { System.out.println("文件上传发生错误" + e1.getMessage()); } String fullPath = null; String fileName = null; for (FileItem fileItem : fileItems) { // 判断该表单项是否是普通类型 if (fileItem.isFormField()) { String name = fileItem.getFieldName();// 控件名 String value = fileItem.getString(); if (name.equals("excelType")) { type = value; } } else { String filePath = fileItem.getName(); if (filePath == null || filePath.trim().length() == 0) continue; fileName = filePath.substring(filePath .lastIndexOf(File.separator) + 1); String extName = filePath.substring(filePath .lastIndexOf(".") + 1); fullPath = basePath + File.separator + fileName; if (allowFileSuffix.indexOf(extName) != -1) { try { fileItem.write(new File(fullPath)); } catch (Exception e) { e.printStackTrace(); } } else { throw new FileUploadException("文件格式不正确"); } } } if (type.equals("station")) { jsonArry = readExcel(fullPath, fileName); } else if (type.equals("line")) { System.out.println("===============:line"); } else if (type.equals("pipeline")) { System.out.println("===============:pipeline"); } else if (type.equals("jdj")) { System.out.println("===============:jdj"); } } return jsonArry; } // 判断文件类型 public Workbook createWorkBook(InputStream is, String excelFileName) throws IOException { if (excelFileName.toLowerCase().endsWith("xls")) { return new HSSFWorkbook(is); } if (excelFileName.toLowerCase().endsWith("xlsx")) { return new XSSFWorkbook(is); } return null; } public JSONArray readExcel(String basePath, String fileName) throws FileNotFoundException, IOException { File file = new File(basePath); Workbook book = createWorkBook(new FileInputStream(file), fileName); JSONObject jsonObj = new JSONObject(); JSONArray jsonArry = new JSONArray(); Sheet sheet = book.getSheetAt(0); for (int i = 3; i < sheet.getLastRowNum(); i++) { Row row = sheet.getRow(i); String lon = row.getCell(2).getNumericCellValue() + ""; String lat = row.getCell(3).getNumericCellValue() + ""; jsonObj.put("lat", lat);// 纬度 jsonObj.put("lon", lon);// 经度 jsonArry.add(jsonObj); } System.out.println(jsonArry.toString()); return jsonArry; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
基本流程终于走通啦，修改后记录一下跟大家分享，欢迎拍砖~~~
不定时更新，查看更新请点击这里