前端
<!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);
}
}
}
}
}
分享到:
相关推荐
angularjs 大文件上传插件ng-file-upload第三方编写的大文件上传插件,包括Demo和所有的ng-file-upload相关JS文件
ng2-文件上传 易于使用的Angular2指令进行文件上传()快速开始建议使用以下命令通过软件包管理器安装ng2-file-upload : npm i ng2-file-upload --save 或者,您可以。 当前ng2-file-upload包含两个指令: ng2-file...
Angular2中有两个比较好用的上传...ng2-file-upload文件上传 1、安装ng2-file-upload模块 npm install ng2-file-upload --save 2、如果使用systemjs打包,需要在配置systemjs.config.js文件 A、在System.config的map字
网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js...
angularjs的第三方编写的大文件上传插件,包括Demo和所有的angular-upload-shim-min.js相关js
文件上传进度,取消/中止。 文件拖放(仅限 html5)。 从剪贴板粘贴图像并从浏览器页面拖放(仅限 html5)。 图像调整大小和中心裁剪(本机)和用户通过 ngImgCrop 控制裁剪。 请参阅裁剪示例(仅限 html5)。 具有 ...
本文主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC使用的相关内容,对于Angular.js文件上传控件ng-file-upload不熟悉的朋友们可以先看看这篇文章(传送门),下面话不多说,来看看详细的...
angularjs的第三方大文件上传插件,包括demo和所有的工具文件
用于angularJS支持文件上传功能,网上找很久才找到。另外一个找到了,立刻就上传。
在Github上找到了一个支持Angular4好用的文件上传组件ng2-file-upload,这里简单介绍一下这个库的集成使用方案。 本文基于该组件的1.2.1版。 1. 安装 安装非常简单,只要在项目根路径下运行如下npm命令即可: npm ...
用到了项目映入过的一个插件,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 或者使用 ...
angular-file, AngularJS的本机文件上传处理 ur.file: AngularJS的原生HTML5-based文件输入绑定示例<html ng-app="myApp"><head> <script src="https://ajax
角度文件上传休息该演示项目将使用 ng-file-upload 插件和 spring REST 端点,并演示如何完成多部分文件上传。 我们可以上传文件以及一些 JSON。
Mean.js 文件上传到 S3 (AWS) Angular ng-file-upload JavaScript aws-sdk 演示:即将推出