angularjs圖片上傳

A. 請教這兩串angularJS代碼為什麼只有火狐可以正常解析

您好，Angular.js 優點：
1. 模板功能強大豐富，並且是聲明式的，自帶了豐富的Angular指令；
2. 是一個比較完善的前端MVC框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等所有功能；
3. 自定義Directive，比JQuery插件還靈活，但是需要深入了解Directive的一些特性，簡單的封裝容易，復雜一點官方沒有提供詳細的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在directive使用 $parse；
4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助，我們的產品 Worktile 讓工作更簡單 從上線到目前，UI變化很大，在摸索中迭代產品，但是js的代碼基本上很少改動。

缺點：
1. 驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標簽，沒有JQuery Validate方便，所以我們自己封裝了驗證的錯誤信息提示，詳細參考 why520crazy/w5c-validator-angular · GitHub ；
2. ngView只能有一個，不能嵌套多個視圖，雖然有 angular-ui/ui-router · GitHub 解決，但是貌似ui-router 對於URL的控制不是很靈活，必須是嵌套式的（也許我沒有深入了解或者新版本有改進）；
3. 對於特別復雜的應用場景，貌似性能有點問題，特別是在Windows下使用chrome瀏覽器，不知道是內存泄漏了還是什麼其他問題，沒有找到好的解決方案，奇怪的是在IE10下反而很快，對此還在觀察中；
4. 這次從1.0.X升級到1.2.X，貌似有比較大的調整，沒有完美兼容低版本，升級之後可能會導致一個兼容性的BUG，具體詳細信息參考官方文檔 AngularJS ，對應的中文版本：AngularJS
5. ng提倡在控制器裡面不要有操作DOM的代碼，對於一些JQuery 插件的使用，如果想不破壞代碼的整潔性，需要寫一些directive去封裝一下JQ插件，但是現在有很多插件的版本已經支持Angular了，如：jQuery File Upload Demo
6. Angular 太笨重了，沒有讓用戶選擇一個輕量級的版本，當然1.2.X後，Angular也在做一些更改，比如把route，animate等模塊獨立出去，讓用戶自己去選擇。

B. angularJS前端顯示文件名是特定字元開頭的多張圖片

var mole = angular.mole('testApp', [])
.controller('myC',function(){
$scope.ta = [1,2,3,4,5,6];
}) .directive('onFinishRender', function () { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { element.ready(function () {
$("#r_img").remove();
}); } } }});

1
2
3
4

<div ng-app="testApp" ng-controller="myC">
<img id="r_img" src="xxxx/xx.jpg"/>
<p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>

C. angularjs 上傳excel文件 是使用formdata嗎

這是
Struts2
自動幫你封裝的，你只需要寫好File的名字與前台對應就可以了，多個文件上傳的話Struts也是有文件數組可以完成的，設置好getset方法即可

D. 是否已經有了AngularJS的畫布繪圖指令

我們經常會在ng-click事件傳入$event參數，這樣在js中我們就可以捕捉到該事件，獲得該事件的一些屬性和方法(例如獲得觸發事件的元素$event.target等)。
示例如下：
Html：

image.png
Js：

image.png
效果：

image.png

image.png
但是需要注意的是當你使用ng-change指令時是無法傳入該參數的：

image.png
經網上查找原因是：

image.png
簡單說就是ng-change並不是一個處理更改事件的指令。因此一般當我們需要用到$event時，需要注意不能使用ng-change。如果可以的話還是用ng-click。
如果只能使用ng-change的話，一個簡單的方法是先用ng-click獲得$event參數，再傳給ng-change，例如：
Html

image.png
Js:

image.png
這樣捕捉到的事件可以定位該元素。
或者可以使用jQuery#on() 或者 jqLite#on()綁定事件監聽來實現，然而我並不會。。。
第二組：葉佳意 JS重繪圖片
在需要上傳圖片到後台時，圖片過大會導致上傳失敗。此時需要將圖片等比例縮小，具體方法如下：
首先，使用createElement() 方法，通過指定名稱創建一個元素。此時我們需要一個canvas 元素。canvas 元素本身是沒有繪圖能力，需使用 JavaScript 在網頁上繪制圖像。因此，需要使用getContext() 方法返回一個用於在畫布上繪圖的環境。當前唯一的合法值是 "2d"，它指定了二維繪圖，並且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API。在計算完縮放比例後，使用drawImage() 方法在畫布上繪制圖像。drawImage() 方法能夠繪制圖像的某些部分，或增加或減少圖像的尺寸。使用context.drawImage(img,x,y,width,height); 在畫布上定點陣圖像，並規定圖像的寬度和高度。
代碼如下：
var cvs = document.createElement('canvas');var scale = 1;if (this.width > 800 || this.height > 800) { //可以根據具體的要求去設定
if (this.width > this.height) {
scale = 800 / this.width;
} else {
scale = 800 / this.height;
}
}
cvs.width = this.width * scale;
cvs.height = this.height * scale;//計算等比縮小後圖片寬高var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);

E. angularjs里數組怎麼引入工程文件夾里的圖片

如果你說的是把工程目錄下所有的圖片載入進來
那是做不到的，需要後端配後，由於跨域安全策略
返回給你圖片列表

如果你問的是怎麼載入圖片
這樣載入圖片
var img ＝ new Image；
img.src = '....jpg';
img.onload = function(){
console.log('圖片載入完成');

}

F. 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，希望大家喜歡。

G. angularjs formdada 在http傳參的寫法有幾種

後台獲取angularjs傳的值 http.post傳的方法：
使用angular-ui-grid，你描述的功能基本是屬於grid范疇。引用angular-ui-grid的js文件，使用ui-grid，其中有屬性方法得到選中的數據，然後通過service，以restful的形式將所選數據以json形式傳到後台

H. 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請求伺服器。看到結果如下：

I. angularjs如何實現圖片延遲載入

jquery的做法是監聽window.scroll，然後判斷圖片的位置，是否需要切換src屬性，那麼angular也一樣，只是由於angular需要將DOM操作寫在指令裡面，所以需要自己去實現指令。
解決思路：
1，圖片的src不要使用真實的地址，用一個屬性保存在元素上
2，把所有需要使用延遲載入的圖片放到一個數組中，
3，初始化的時候檢查數組中的元素是否在可視范圍內，可視范圍內即載入
4，給window綁定滾動事件檢查圖片是否在可視范圍內
5，載入完成的圖片從隊列中刪除

J. 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)