angular組件傳值，angular 上傳圖像的使用總結

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>

angular組件傳值，<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>