網站上有時候會用到上傳檔案功能。
透過 angular,可以使用angular-file-upload 很方便的就建立出來
這個 module 也有提供很多 API 可以使用 Module-API
controller
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| app
.controller('VideoShowCtrl',
[ '$scope', '$http', 'FileUploader', '$stateParams',
function( $scope , $http , FileUploader , $stateParams){
//透過 $stateParams (ui-router) 可以得到 router 上的 id
var postID = $stateParams.id
var uploader = new FileUploader({
url: '/posts/show' + postID',
formData: [],
headers: {
'X-CSRF-TOKEN' : document.querySelector("meta[name=csrf-token]").content
}
});
//內建提供上傳檔案前可以做哪些事
uploader.onBeforeUploadItem = function(item){
//若是傳的是 array,接到的會變成 string,可能是放在 formData 的原因@@
item.formData.push({ title: 'hello' })
};
//內建提供上傳檔案後做哪些事
uploader.onAfterAddingFile = function(item){
if(item.uploader.queue.length > 1){ item.uploader.queue.shift() }
};
$scope.uploader = uploader
}]);
|
view
1
| <input type="file" nv-file-select="" uploader="uploader" />
|
參考文件:
URL Routing
gem:
angularjs-file-upload-rails
angular-file-upload