angular 中文官网（AngularJS中文社区angular 怎么上传文件）

本文目录

• AngularJS中文社区angular 怎么上传文件
• AngularJS中文社区$stateChangeStart事件怎么触发

AngularJS中文社区angular 怎么上传文件

利用angular-file-upload组件就可以了。
angular-file-upload 是一个基于HTML5技术的文件上传轻量级 AngularJS指令（directive），当浏览器不支持时转为采用 FileAPI polyfill技术实现(基于Flash)。
参考:
//inject angular file upload directives and service.angular.module(’myApp’, );var MyCtrl = [ ’$scope’, ’$upload’, function($scope, $upload) {
$scope.onFileSelect = function($files) { //$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i 《 $files.length; i++) { var file = $files;
$scope.upload = $upload.upload({
url: ’server/upload/url’, //upload.php script, node.js route, or servlet url
//method: ’POST’ or ’PUT’,
//headers: {’header-key’: ’header-value’},
//withCredentials: true,
data: {myObj: $scope.myModelObj},
file: file, // or list of files ($files) for html5 only
//fileName: ’doc.jpg’ or // to modify the name of the file(s)
// customize file formData name (’Content-Disposition’), server side file variable name.
//fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is ’file’
// customize how data is added to formData. See #40#issuecomment-28612000 for sample code
//formDataAppender: function(formData, key, val){}
}).progress(function(evt) { console.log(’percent: ’ + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) { // file is uploaded successfully
console.log(data);
}); //.error(...)
//.then(success, error, progress);
// access or attach event listeners to the underlying XMLHttpRequest.
//.xhr(function(xhr){xhr.upload.addEventListener(...)})
***隐藏网址***
***隐藏网址***
};
}];
html:
《!-- shim is needed to support upload progress/abort for HTML5 and non-HTML5 FormData browsers.--》《!-- angular-file-upload-html5-shim.js could be used instead of angular-file-upload-shim if your app targets HTML5 browsers only (not IE8-9) --》《!-- Note: shim.js MUST BE PLACED BEFORE angular.js and angular-file-upload.js AFTER angular.js--》《script src="angular-file-upload-shim.min.js"》《/script》
《script src="angular.min.js"》《/script》
《script src="angular-file-upload.min.js"》《/script》

《div ng-controller="MyCtrl"》
《input type="text" ng-model="myModelObj"》
《input type="file" ng-file-select="onFileSelect($files)"》
《input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*"》
《div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"》《/div》
《div ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class-name-or-function"
ng-show="dropSupported"》drop files here《/div》
《div ng-file-drop-available="dropSupported=true"
ng-show="!dropSupported"》HTML5 Drop File is not supported!《/div》
《button ng-click="upload.abort()"》Cancel Upload《/button》
《/div》

AngularJS中文社区$stateChangeStart事件怎么触发

$stateProvider.state(’home’, { url: ’/’, resolve: { person: function() { return ’good’ } }
比如上面的 person 值，要如何在$stateChangeSuccess触发时的callback中获取到呢？
$rootScope.$on(’$stateChangeSuccess’,
function(event, toState, toParams, fromState, fromParams) {
console.log(toState); // 这个 toState 没有 person 的值 ’good’
console.log(toParams);
});