ng-file-upload文件上传

最新推荐文章于 2024-08-02 20:11:41 发布

xafc

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量740

点赞数

分类专栏： Java JavaScript 文章标签： html java JavaScript angularjs ng-file-upload ViewUI

本文链接：https://blog.csdn.net/xafc_2370/article/details/84923668

版权

Java 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

前端

<!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);
                }
            }
        }
     }

}

xafc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng-file-upload文件上传

前端[code="html"] 文件上传 var app = angular.module('app', ['ngFileUpload']); app.controller('bmcuCtrl', [ '$scope', 'Upload', function($s...
复制链接

扫一扫

专栏目录