angularJs中上传图片/文件功能：ng-file-upload

原文技术交流：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/

在做网站的过程中难免会遇到上传图片或者上传文件的功能，使用AngularJ实现的话可以用angularJs的ng-file-upload这个库。

• 支持上传文件(目前为止我用过的是Excel上传，与上传图片的方法一样)
• 支持单张图片上传
• 支持多张图片上传
• 支持拖拽图片上传

1.Install安装引用

• 手册：可以从这里下载最新的js库
• Bower安装：
  bower install ng-file-upload-shim --save(for non html5 suppport)
  bower install ng-file-upload --save
• NuGet：PM> Install-Package angular-file-upload
• NPM：npm install ng-file-upload

2.Usage用法

(1)Single image upload

image-upload.html: //显示选择的图片 选择文件 upload   image-upload-ctrl.js:  $scope.data = { file: null }; $scope.upload = function () { if (!$scope.data.file) { return; } var url = $scope.params.url; //params是model传的参数，图片上传接口的url var data = angular.copy($scope.params.data || {}); // 接口需要的额外参数，比如指定所上传的图片属于哪个用户: { UserId: 78 } data.file = $scope.data.file; Upload.upload({ url: url, data: data }).success(function (data) { $scope.hide(data); }).error(function () { logger.log('error'); }); };

 

(2)Multiple images upload

选择多张图片   //ngf-multiple控制是否可以上传多张图片   // for multiple files: $scope.upload = function (files) { if (files && files.length) { for (var i = 0; i < files.length; i++) { Upload.upload({..., data: {file: files[i]}, ...})...; } // or send them all together for HTML5 browsers: Upload.upload({..., data: {file: files}, ...})...; } }

 

(3)Drop Single  image

image-upload.html: 选择图片 (支持拖拽单张图片上传)     开始上传   style.css: .cropArea { background: #E4E4E4; min-height: 230px; height: auto; margin: 15px; margin-right: 0; }

 

(4)Drop and Select  Multiple images upload

image-upload.html: 选择图片 (支持多张图片拖拽上传) 该浏览器不支持拖拽上传。 //定义了图片可以拖拽的位置 //排列显示上传的多张图片   style.css: .cropArea { background: #E4E4E4; min-height: 230px; height: auto; margin: 15px; margin-right: 0; } image-upload-ctrl.js: $scope.data = { file: null, defaultImage: commonSvc.defaultImage }; $scope.mulImages = []; $scope.$watch('files', function () { $scope.selectImage($scope.files); }); //根据选择的图片来判断 是否为一下子选择了多张 //一下子选择多张的数据格式为一个数组中有多个对象，而一次只选择一张的数据格式为一个数组中有一个对象 $scope.selectImage = function (files) { if (!files || !files.length) { return; } if (files.length > 1) { angular.forEach(files, function (item) { var image = []; image.push(item); $scope.mulImages.push(image); }) } else { $scope.mulImages.push(files); } }; $scope.upload = function () { if (!$scope.mulImages.length) { return; } var url = $scope.params.url; var data = angular.copy($scope.params.data || {}); data.file = $scope.mulImages; Upload.upload({ url: url, data: data }).success(function (data) { $scope.hide(data); $rootScope.alert('success'); }).error(function () { $rootScope.alert(‘error’); }); };

以上内容是我做项目中需要的一些功能，也许不是该库全面的功能，若有其他需求可以查看GitHub官方文档：https://github.com/danialfarid/ng-file-upload