第一步：將js檔案引入頁面

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>

第二步：在頁面中提供任意一個元素

第三步：呼叫外掛提供的upload方法，動態修改

1 <script type="text/javascript">
2     $(function(){
3         //頁面載入完成後，呼叫外掛的upload方法，動態修改了HTML頁面元素
4         $("#myButton").upload({
5             action:'xxx.action',
6             name:'myFile'
7         });
8     });
9 </script>

第四步：服務費利用同名檔案接收

POI需要在專案中引入依賴

<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>3.11</version>
</dependency>

 1 //使用POI解析
 2         HSSFWorkbook workbook = new HSSFWorkbook(new FileInputStream(regionFile));
 3         HSSFSheet sheet = workbook.getSheetAt(0);
 
 4         List<Region> regionList = new ArrayList<Region>();
 5         for(Row row : sheet) {
 6             int rowNum = row.getRowNum();
 7             if(rowNum == 0) {
 8                 continue;
 9             }
10             String id = row.getCell(0).getStringCellValue();
11             String province = row.getCell(1).getStringCellValue();
12             String city = row.getCell(2).getStringCellValue();
13             String district = row.getCell(3).getStringCellValue();
14             String postcode = row.getCell(4).getStringCellValue();
15             //包裝成區域物件
16             Region region = new Region();
17             region.setId(id);
18             region.setProvince(province);
19             region.setCity(city);
20             region.setDistrict(district);
21             region.setPostcode(postcode);
22             
23             province = province.substring(0, province.length()-1);
24             city = city.substring(0, city.length()-1);
25             district = district.substring(0, district.length()-1);
26             String info = province + city + district;
27             //利用pinyin獲得首字母簡碼
28             String[] headByString = PinYin4jUtils.getHeadByString(info);
29             String shortcode = StringUtils.join(headByString);
30             //城市編碼
31             String citycode = PinYin4jUtils.hanziToPinyin(city, "");
32             region.setCitycode(citycode);
33             region.setShortcode(shortcode);
34             
35             regionList.add(region);

 POI生成Excel檔案並下載

 1 //分割槽資料匯出
 2     public String exportXls() throws IOException {
 3         //查詢所有資料
 4         List<Subarea> subareaList = subareaService.findAll();
 5         //利用POI寫到Excel中
 6         HSSFWorkbook hssfWorkbook = new HSSFWorkbook();
 7         //建立標籤頁
 8         HSSFSheet sheet = hssfWorkbook.createSheet("分割槽資料");
 9         //建立行
10         HSSFRow headRow = sheet.createRow(0);
11         headRow.createCell(0).setCellValue("分割槽編號");
12         headRow.createCell(1).setCellValue("開始編號");
13         headRow.createCell(2).setCellValue("結束編號");
14         headRow.createCell(3).setCellValue("位置資訊");
15         headRow.createCell(4).setCellValue("省市區");
16         
17         for(Subarea subarea : subareaList) {
18             HSSFRow dataRow = sheet.createRow(sheet.getLastRowNum() + 1);
19             dataRow.createCell(0).setCellValue(subarea.getId());
20             dataRow.createCell(1).setCellValue(subarea.getStartnum());
21             dataRow.createCell(2).setCellValue(subarea.getEndnum());
22             dataRow.createCell(3).setCellValue(subarea.getPosition());
23             dataRow.createCell(4).setCellValue(subarea.getRegion().getName());
24         }
25         //提供下載
26         String filename = "分割槽資料.xls";
27         
28         String contentType = ServletActionContext.getServletContext().getMimeType(filename);
29         ServletOutputStream outputStream = ServletActionContext.getResponse().getOutputStream();
30         hssfWorkbook.write(outputStream);
31         //獲取客戶端瀏覽器型別
32         String agent = ServletActionContext.getRequest().getHeader("User-Agent");
33         filename = FileUtils.encodeDownloadFilename(filename, agent);
34         //設定響應頭
35         ServletActionContext.getResponse().setHeader("content-disposition", "attachment;filename="+filename);
36         //ServletActionContext.getResponse().setContentType("application/vnd.ms-excel");
37         ServletActionContext.getResponse().setContentType(contentType);
38         return NONE;
39     }