angular上傳文件
㈠ angularjs使用$http post上傳文件的時候，怎樣獲取文件上傳的進度
angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法，所以可以直接這樣寫：
$http({
method: 'POST',
url: url,
eventHandlers: {
progress: function(c) {
console.log('Progress -> ' + c);
console.log(c);
}
},
uploadEventHandlers: {
progress: function(e) {
console.log('UploadProgress -> ' + e);
console.log(e);
}
},
data: uploadData,
}).success(function(data) {
console.log(data);
}).error(function(data, status) {
console.log(data);
});
最後，也可以用比較成熟的組件去解決，推薦angular-file-upload
㈡ angularjs怎麼通過ajax上傳文件
ngularJS提供$http控制，可以作為一項服務從伺服器讀取數據。伺服器可以使一個資料庫調用來獲取記錄。 AngularJS需要JSON格式的數據。一旦數據准備好，$http可以用以下面的方式從伺服器得到數據。
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
在這里，data.txt中包含的學生記錄。 $http服務使Ajax調用和設置針對其學生的屬性。 「學生」模型可以用來用來繪制 HTML 表格。
例子
data.txt[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]
testAngularJS.html<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
輸出
要運行這個例子，需要部署textAngularJS.html，data.txt到一個網路伺服器。使用URL在Web瀏覽器中打開textAngularJS.html請求伺服器。看到結果如下：
㈢ AngularJS中文社區angular 怎麼上傳文件
需要同時上傳兩個文件。並且規定文件格式和文件大小。因為前端框架使用angular，且不想因為一個上傳功能又引入一個jquery，所以在網上查找基於angular的上傳控制項，因為angular還算比較新，貌似都沒有太成熟的插件。
㈣ angularjs 上傳excel文件 是使用formdata嗎
這是
Struts2
自動幫你封裝的，你只需要寫好File的名字與前台對應就可以了，多個文件上傳的話Struts也是有文件數組可以完成的，設置好getset方法即可
㈤ Angular中文社區angular 怎麼上傳文件
上傳可以使用多種插件上傳，如果要用jQuery，請參考 jQuery File Upload Demo AngularJS Requirements jQuery v. 1.6+ jQuery UI widget factory v. 1.9+ (included) jQuery Iframe Transport plugin (included) javaScript Templates engine v. 2.2.1+ (optional) JavaScript Load Image function v. 1.7.3+ (optional) JavaScript Canvas to Blob function v. 2.0.6+ (optional) Bootstrap CSS Toolkit v. 2.3+ (optional)
㈥ 如何把整個的angular文件上傳到伺服器上去
用ftp或遠程桌面 上傳
最主要還是環境的搭建
㈦ angular4.0引入js插件怎麼寫聲明文件
上傳按鈕的樣式
首先我想先說一下上傳文件的按鈕樣式，為什麼呢？大家都知道上傳會用到這個標簽。<input type="file"/>,這行代碼的默認樣式真的有點不好看，見下圖：
在一個稍微有點逼格的網站中，這樣一個樣式實在是有點損失形象了，而且如果需要在前面加一個輸入框來顯示文件名的話，那默認的顯示文件名的區域怎麼隱藏掉呢？別急，繼續看：
用一個a標簽包住input標簽，然後把input標簽的opacity設為0，就可以了嘛！ok，看代碼：
html：
?
1
2
3
4
5
6
7
8
9
10
11
12
<div>
<input class="filename" type="text" readonly="readonly" />
<a href="javascript:;" name="file">
<input type="file" name="key"/>瀏覽
</a>
</div>
<div>
<input class="filename" type="text" readonly="readonly" />
<a href="javascript:;" name="file">
<input type="file" name="key"/>瀏覽
</a>
</div>
㈧ 你好，我用webuploader.html5only.min.js實現批量圖片上傳，我該怎麼在action中獲取上傳的那些文件呢
1.1 分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
1.6 易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
2、引入資源
2.1 下載包內容
├── Uploader.swf // SWF文件，當使用Flash運行時需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash實現的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5實現的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除圖片處理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下載Git項目包。
// SWF文件，當使用Flash運行時需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除圖片處理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包藉助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 編譯代碼
1.克隆 webuploader git倉庫，git clone https://github.com/fex-team/webuploader.git。
2.安裝node依賴，npm install。
3.執行grunt dist，此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。
2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本
// 自己配置的實例
// glob語法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}
3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕，可以自行配置上傳文件的類型和過濾規則，且在彈出的模態框中進行操作，支持連續上傳，分類選擇上傳
3.2 使用說明
這里只是使用說明，可能會加一些注意事項，具體參數或者變數說明請參看後面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型，分別為
image：圖片
video：音視頻
flash：flash
file：辦公文檔，壓縮文件等等
過濾規則
accept有四個對象屬性，屬性中包含標題、允許文件後綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事，給元素本身綁定彈出模態框的事件，具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類，配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){
//這里是上傳配置代碼
},0)
因為配置uploader時需要事先准備好dom元素，angular打開模態框是非同步而JavaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有載入完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的後綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔，壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
㈨ angularjs 上傳文件java 怎麼接收
首先java文件裡面 你User aUser = new User();你雖然new了這個實體，但是你並沒有給這個實體賦值，new出來的實體裡面的所有屬性都是null的。所以你輸出再回是null。然後是jsp文件你輸出的是null說明你的response.userName值就是null，
㈩ angularjs上傳文件怎麼設置$http為multipart/form-data
前言：很久沒更新博客，最近公司pc端技術選型用angular,這幾天就趕鴨子上架，硬著頭皮直接上手angular。其中有許多小坑陸陸續續踩起走。今天就遇到一個比較常見的問題：圖片上傳。 主題：圖片上傳伺服器，然後通過伺服器傳阿里雲。 不廢話了直接貼前端代碼： $http({ method: 『POST『, url: 『/wechatapp/User/setAvatar『, data: data, headers: { 『Content-Type『: undefined }, transformRequest: function(data) { var formData = new FormData(); formData.append(『avatar_data『, data.adata); formData.append(『avatar_file『, data.file); return formData; }, data: { adata: scope.avatar_data, file: scope.avatar_file } }).success(function(d) { //請求成功 cb(d); }).error(function(err, status) { console.log(err); cb(err); }); 其實沒神馬難點，主要是取消post默認的Content-Type,然後已FormData的方式上傳。一般ajax上傳文件都是以FormData方式傳。 以上就是本文給大家介紹Angular Js文件上傳之form-data，希望大家喜歡。