`

ng-file-upload文件上传

阅读更多
前端
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文件上传</title>
    <meta charset="utf-8" />
    <script src="JS/angular.min.js"></script>
    <script src="JS/ng-file-upload.min.js"></script>
    <script src="JS/ng-file-upload-shim.min.js"></script>
    <script>
        var app = angular.module('app', ['ngFileUpload']);
        app.controller('bmcuCtrl',
		[ '$scope', 'Upload', function($scope, Upload) {
			$scope.uploadFile = function() {
				  Upload.upload({
	                    //服务端接收
	                    url: 'api/customer/uploadBatchFile',
	                    //上传的同时带的参数
	                    data: {},
	                    file: $scope.file
	                }).progress(function (evt) {
	                    //进度条
	                    var progressPercentage = parseInt(100.0 *
                          evt.loaded / evt.total);          
                          console.log('progess:'+progressPercentage+ 
                          '%' + evt.config.file.name);
	                }).success(function (data, status, headers, config) {
	                    //上传成功
	                    console.log('file ' + config.file.name 
                           + 'uploaded. Response: ' + data);
	                }).error(function (data, status, headers, config) {
	                    //上传失败
	                    console.log('error status: ' + status);
	                });
			}
	} ]);
    </script>
</head>
<body ng-controller="'bmcuCtrl'">
	<div>
		<a href="/app/public/common/batch-mode-cust-unit/batch_change.xls" style="color: red;"
			target="_blank"> 模板下载 </a>
		<input type="file" name="file" ngf-select ng-model="file" accept="application/msexcel" >
	    <button class="btn btn-primary" ng-click="uploadFile()">导入</button>
	</div>
</body>
</html>


后端:
@Controller
@RequestMapping("/api/customer")
@ResponseBody
public class TestNgUpload{

@RequestMapping("/uploadBatchFile'")
    public void uploadBatchFile'(HttpServletRequest request) throws Exception {
        CommonsMultipartResolver multipartResolver =
            new CommonsMultipartResolver(request.getSession().getServletContext());
        if(multipartResolver.isMultipart(request)){
            //再将request中的数据转化成multipart类型的数据
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            Iterator iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                String name = (String) iter.next();
                MultipartFile file = multiRequest.getFile(name);
                String fileName = file.getOriginalFilename();
                String format = fileName.substring(fileName.indexOf(".")+1);
                InputStream inputStream = file.getInputStream();
                Workbook wb = null;
                if (format.equals("xls") || format.equals("msexcel")) {
                    wb = new HSSFWorkbook(inputStream);
                }
                if (format.equals("xlsx")) {
                    wb = new XSSFWorkbook(inputStream);
                }
                String[][] objArray = ExcelUtil.readExcel(wb, 1);
                if(objArray.length>0){
                   BatchCustUnitVo batchCustUnitVo = new BatchCustUnitVo();
                   List<String> accNbrList = new ArrayList<String>();
                   List<String> dataColList = new ArrayList<String>();
                   for(int i=0;i<objArray.length;i++){            
                       accNbrList.add(objArray[i][0].trim());
                       dataColList.add(objArray[i][1].trim());
                   }
                   batchCustUnitVo.setAccNbrList(accNbrList);
                   batchCustUnitVo.setDataColList(dataColList);
                   customerService.uploadBatchCustUnit(batchCustUnitVo);
                }
            }
        }
     }
}
分享到:
评论

相关推荐

    文件上传插件 ng-file-upload

    **文件上传插件 ng-file-upload** 是一个专为AngularJS框架设计的高效、可靠的文件上传解决方案。这个插件由第三方开发者构建,旨在处理大文件上传,同时提供了丰富的功能和易于使用的API,使得在Web应用中集成文件...

    ng-file-upload-master.zip

    《AngularJS大文件上传插件ng-file-upload深度解析》 在Web开发中,文件上传功能是不可或缺的一部分,尤其是在处理大文件时,用户交互体验和上传效率尤为重要。AngularJS作为一款强大的前端框架,提供了丰富的功能...

    ng-file-upload

    "ng-file-upload"插件通过使用HTML5的File API和FormData对象,实现了非刷新的异步文件上传,从而解决了这个问题。它还支持进度条显示、取消上传、预览文件等功能,大大提升了用户交互体验。 此插件的核心特性包括...

    angular2 ng2-file-upload上传示例代码.docx

    `ng2-file-upload`库为开发者提供了方便、灵活的文件上传解决方案。本篇文章将详细讲解如何使用`ng2-file-upload`实现文件上传,并探讨其主要配置选项。 首先,为了使用`ng2-file-upload`,你需要通过npm来安装它:...

    ng2-file-upload:易于使用的Angular组件用于文件上传

    ng2-文件上传 易于使用的Angular2指令进行文件上传()快速开始建议使用以下命令通过软件包管理器安装ng2-file-upload : npm i ng2-file-upload --save 或者,您可以。 当前ng2-file-upload包含两个指令: ng2-file...

    angular-file-upload 上传控件

    Angular-File-Upload是一个专为AngularJS设计的轻量级、易于使用的上传组件,它提供了丰富的特性来处理文件上传操作。这个控件封装成用户友好的形式,使得在.NET平台上使用变得简单而高效。 ### 1. AngularJS框架...

    angular2 ng2-file-upload上传示例代码

    在本文中,我们将深入探讨如何在Angular 2项目中使用`ng2-file-upload`库进行文件上传。`ng2-file-upload`是一个强大的Angular模块,它提供了丰富的功能来处理文件上传,包括进度条显示、文件预览、错误处理等。下面...

    AngularJS 文件上传控件 ng-file-upload详解

    首先,ng-file-upload 支持上传进度展示,这意味着用户可以看到文件上传的实时进度,提升用户体验。通过监听 `progress` 事件,开发者可以更新 UI 上的进度条,代码示例如下: ```javascript Upload.upload({ // ...

    ng-file-upload:用于上传文件的轻量级 Angular 指令-开源

    文件上传进度,取消/中止。 文件拖放(仅限 html5)。 从剪贴板粘贴图像并从浏览器页面拖放(仅限 html5)。 图像调整大小和中心裁剪(本机)和用户通过 ngImgCrop 控制裁剪。 请参阅裁剪示例(仅限 html5)。 具有 ...

    Angular4集成ng2-file-upload的上传组件

    在Angular4开发中,集成ng2-file-upload库可以实现强大的文件上传功能。ng2-file-upload是一个基于Angular2+的文件上传组件,它提供了丰富的配置选项和事件处理,使得在Web应用中添加文件上传功能变得简单易行。以下...

    Angular.js ng-file-upload结合springMVC的使用教程

    本文主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC使用的相关内容,对于Angular.js文件上传控件ng-file-upload不熟悉的朋友们可以先看看这篇文章(传送门),下面话不多说,来看看详细的...

    angular-file-upload

    "angular-file-upload" 是一个基于AngularJS框架的文件上传组件,专为在Web应用程序中实现高效、用户友好的文件上传功能而设计。这个插件利用了AngularJS的双向数据绑定和模块化特性,使得在AngularJS应用中集成文件...

    angular-file-upload.min.js

    用于angularJS支持文件上传功能,网上找很久才找到。另外一个找到了,立刻就上传。

    angular-file-upload-rest:该演示项目将使用 ng-file-upload 插件和 spring REST 端点,并演示如何完成多部分文件上传。 我们可以上传文件以及一些 JSON

    `ng-file-upload` 是一个强大的 AngularJS 文件上传服务和指令库,它支持多种浏览器,包括 IE9,且具有异步上传、进度显示、预览、验证等多种特性。 **一、ng-file-upload 插件介绍** `ng-file-upload` 提供了一...

    Angular angular-file-upload文件上传的示例代码

    用到了项目映入过的一个插件,angular-file-upload。 angular-file-upload AP:https://github.com/nervgh/angular-file-upload 进入正题,我们如何安装,还是老样子安利波npm npm install angular-file-upload ...

    s3-angular-file-upload:使用 ng-file-upload、angular、nodejs 上传 S3 文件示例

    ng-file-upload 用于将多部分文件上传到 S3测试Jasmine 测试通过前端的业力运行。 Mocha 测试通过后端的 grunt 运行。入门安装 Node.js 使用安装程序 或者使用 macports sudo port install nodejs 或者使用 ...

Global site tag (gtag.js) - Google Analytics