前端
<!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** 是一个专为AngularJS框架设计的高效、可靠的文件上传解决方案。这个插件由第三方开发者构建，旨在处理大文件上传，同时提供了丰富的功能和易于使用的API，使得在Web应用中集成文件...
《AngularJS大文件上传插件ng-file-upload深度解析》 在Web开发中，文件上传功能是不可或缺的一部分，尤其是在处理大文件时，用户交互体验和上传效率尤为重要。AngularJS作为一款强大的前端框架，提供了丰富的功能...
"ng-file-upload"插件通过使用HTML5的File API和FormData对象，实现了非刷新的异步文件上传，从而解决了这个问题。它还支持进度条显示、取消上传、预览文件等功能，大大提升了用户交互体验。 此插件的核心特性包括...
`ng2-file-upload`库为开发者提供了方便、灵活的文件上传解决方案。本篇文章将详细讲解如何使用`ng2-file-upload`实现文件上传，并探讨其主要配置选项。 首先，为了使用`ng2-file-upload`，你需要通过npm来安装它：...
ng2-文件上传 易于使用的Angular2指令进行文件上传（）快速开始建议使用以下命令通过软件包管理器安装ng2-file-upload ： npm i ng2-file-upload --save 或者，您可以。 当前ng2-file-upload包含两个指令： ng2-file...
Angular-File-Upload是一个专为AngularJS设计的轻量级、易于使用的上传组件，它提供了丰富的特性来处理文件上传操作。这个控件封装成用户友好的形式，使得在.NET平台上使用变得简单而高效。 ### 1. AngularJS框架...
在本文中，我们将深入探讨如何在Angular 2项目中使用`ng2-file-upload`库进行文件上传。`ng2-file-upload`是一个强大的Angular模块，它提供了丰富的功能来处理文件上传，包括进度条显示、文件预览、错误处理等。下面...
首先，ng-file-upload 支持上传进度展示，这意味着用户可以看到文件上传的实时进度，提升用户体验。通过监听 `progress` 事件，开发者可以更新 UI 上的进度条，代码示例如下： ```javascript Upload.upload({ // ...
文件上传进度，取消/中止。 文件拖放（仅限 html5）。 从剪贴板粘贴图像并从浏览器页面拖放（仅限 html5）。 图像调整大小和中心裁剪（本机）和用户通过 ngImgCrop 控制裁剪。 请参阅裁剪示例（仅限 html5）。 具有 ...
在Angular4开发中，集成ng2-file-upload库可以实现强大的文件上传功能。ng2-file-upload是一个基于Angular2+的文件上传组件，它提供了丰富的配置选项和事件处理，使得在Web应用中添加文件上传功能变得简单易行。以下...
本文主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC使用的相关内容，对于Angular.js文件上传控件ng-file-upload不熟悉的朋友们可以先看看这篇文章（传送门），下面话不多说，来看看详细的...
"angular-file-upload" 是一个基于AngularJS框架的文件上传组件，专为在Web应用程序中实现高效、用户友好的文件上传功能而设计。这个插件利用了AngularJS的双向数据绑定和模块化特性，使得在AngularJS应用中集成文件...
用于angularJS支持文件上传功能，网上找很久才找到。另外一个找到了，立刻就上传。
`ng-file-upload` 是一个强大的 AngularJS 文件上传服务和指令库，它支持多种浏览器，包括 IE9，且具有异步上传、进度显示、预览、验证等多种特性。 **一、ng-file-upload 插件介绍** `ng-file-upload` 提供了一...
用到了项目映入过的一个插件，angular-file-upload。 angular-file-upload AP：https://github.com/nervgh/angular-file-upload 进入正题，我们如何安装，还是老样子安利波npm npm install angular-file-upload ...
ng-file-upload 用于将多部分文件上传到 S3测试Jasmine 测试通过前端的业力运行。 Mocha 测试通过后端的 grunt 运行。入门安装 Node.js 使用安装程序 或者使用 macports sudo port install nodejs 或者使用 ...