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)