EasyUi通过OCUpload上传及POI上传 实现导入xls表格功能

Posted sjzxs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUi通过OCUpload上传及POI上传 实现导入xls表格功能相关的知识,希望对你有一定的参考价值。

   第一步:要想使用OCUpload首先前端需要导入js包

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

  第二步:提供一个上传按钮(本案例用的EasyUi框架)

   var toolbar = [{
                id: ‘button-edit‘,
                text: ‘修改‘,
                iconCls: ‘icon-edit‘,
                handler: doView
            }, {
                id: ‘button-import‘,
                text: ‘导入‘,
                iconCls: ‘icon-redo‘
           ];

第三步:提供按钮事件

   $(function() {
                $(‘#button-import‘).upload({
                    action: ‘${pageContext.request.contextPath}/upLoad.action‘,
                    name: ‘areaFile‘,
                    onComplete: function(data) {

          alert(data);

      }

     });

    });

  第四步:写controller层

@Controller
@ParentPackage("struts-default")
@Namespace("/")
@Scope("prototype")
public class AreaAction extends ActionSupport implements ModelDriven<Area> {
    private Area model = new Area();
  @Resource
    private AreaService areaservice;

 @Action(value="areaAction_importXls")
    public String importXls() throws IOException{
        String flag = "1";//1-成功;0-失败
        try {
            //1.使用workbook获取整个excel
            HSSFWorkbook wb = new HSSFWorkbook(new FileInputStream(areaFile));
            //2.使用workbook获取某个sheet页
            HSSFSheet sheet = wb.getSheetAt(0);
            //3.遍历sheet页获取row行
            List<Area> list = new ArrayList<Area>();
            for(Row row : sheet){
                //3.1跳过第一行标题行
                int rowNum = row.getRowNum();
                if(0 == rowNum){
                    continue;//跳过本次循环,进入下一次循环
                }
                //4.使用row获取cell单元格
                String id = row.getCell(0).getStringCellValue();
                String province = row.getCell(1).getStringCellValue();
                String city = row.getCell(2).getStringCellValue();
                String district = row.getCell(3).getStringCellValue();
                String postcode = row.getCell(4).getStringCellValue();
                //5.创建area封装数据
                Area area = new Area();
                area.setId(id);
                area.setProvince(province);
                area.setCity(city);
                area.setDistrict(district);
                area.setPostcode(postcode);
                
                province = province.substring(0, province.length() - 1);
                city = city.substring(0, city.length() - 1);
                district = district.substring(0, district.length() - 1);
                String tempStr = province+city+district;//河北石家庄开发
                String[] headByString = PinYin4jUtils.getHeadByString(tempStr);//[H,B,S,J,Z,K,F]
                String shortcode = StringUtils.join(headByString, "");
                area.setShortcode(shortcode);
                
                //2.城市码
                String citycode = PinYin4jUtils.hanziToPinyin(city,"");
                area.setCitycode(citycode);
                
                list.add(area);
            }
            //6.批量保存数据
            areaService.batchSave(list);
        } catch (IOException e) {
            e.printStackTrace();
            flag = "0";
        }
        //7.使用response将flag返回
        ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
        ServletActionContext.getResponse().getWriter().print(flag);
        return NONE;
    }

}

第五步:创建service层的save方法实现保存。

@Service
@Transactional
public class AreaServiceimp implements AreaService {

 @Resource
    private AreaDao areadao;

    @Override
    public void add(ArrayList<Area> list) {
        for (Area area : list) {
            areadao.save(area);
        }
    }

}

第六步:AreaDao创建(本测试案例用到的持久层是JPA)

    public interface AreaDao extends JpaRepository<Area, String>, JpaSpecificationExecutor<Area> { }

第七步:修改jsp页面,如果上传成功提示用户上传成功、如果失败就提示上传失败。

             <script>
            $(function() {
                $(‘#button-import‘).upload({
                    action: ‘${pageContext.request.contextPath}/upLoad.action‘,
                    name: ‘areaFile‘,
                    onComplete: function(data) {
                        if("1" == data) {
                            $.messager.confirm(‘提示信息‘, ‘上传成功‘, ‘info‘);
                        } else {
                            $.messager.alert(‘提示信息‘, ‘上传失败‘, ‘error‘);
                        }
                    }
                })
            })
        </script>

开始测试:

技术分享图片

技术分享图片



































































































以上是关于EasyUi通过OCUpload上传及POI上传 实现导入xls表格功能的主要内容,如果未能解决你的问题,请参考以下文章

使用ocupload和POI一键上传Excel并解析导入数据库

jQuery OCUpload一键上传文件

excel上传保存到数据库 poi

OCUpload的简单介绍与使用

jQuery插件ocupload的问题!我使用ocupload做图片上传,发现当重复上传同一图片,插件就会失效。

ocupload完成文件上传(一键上传)