AngularJS 的文件上传控件有两个:
（1） angular-file-upload：https://github.com/nervgh/angular-file-upload
（2） ng-file-upload：https://github.com/danialfarid/ng-file-upload
我利用的是ng-file-upload，但是有一问题，有时会在电脑显示卡顿的问题（特别是苹果）。
前端的方式使用简单使用方式如下：页面应用：
<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(‘FileController’, function ($scope, Upload) {
$scope.uploadImg = ”;
//提交
$scope.submit = function () {
$scope.upload($scope.file);
};
$scope.upload = function (file) {
$scope.fileInfo = file;
Upload.upload({
//服务端接收
url: ‘Ashx/UploadFile.ashx’,
//上传的同时带的参数
data: {‘username’: $scope.username},
//上传的文件
file: 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);
$scope.uploadImg = data;
}).error(function (data, status, headers, config) {
//上传失败
console.log(‘error status: ‘ + status);
});
};
});
</script>
<form ng-controller=”FileController”>
<img src=”{{uploadImg}}”/>
前上传用户:<input type=”text” placeholder=”请输入您的名称” name=”name” ng-model=”username”/>
<div class=”button” ngf-select ng-model=”file” name=”file” ngf-pattern=”‘image/*” accept=”image/*” ngf-max-size=”20MB” ngf-min-height=”100″>Select</div>
<button type=”submit” ng-click=”submit()”>submit</button>
</form>
