注意事项:
1、console.log(this.result;); //这个不建议输出, 输出浏览器会很卡,这个输出的是base64的图片,很长。查看效果可以传递到后台查看。
2、jsp中accept="image/jpg,image/jpeg,image/png",要具体类型,否则,点击上传图片会很卡很卡 大约6s的反应
3、在控制器中做测试时,不要用console.log(i);做测试,因为i是闭包引用。特详细的我也说不出,我也有些晕乎。结果会一直都是最后那条数,~~我在这浪费了1天时间,在此谢我的黄兄指点
伪代码如下:
jsp:
{{fileName}} <!-- 利用angular的双向绑定,显示要上传的文件名-->
<div class="button" ngf-select="uploadFiles($files)" ng-model="files" ngf-multiple="true" accept="image/jpg,image/jpeg,image/png">上传图片</div>
指令控制器,CertificateRequisitionController
/**
* 定义全局变量,方便后期,保存、修改时使用
*/
var fileNames='';
var fileContents='';
/**
* 多图片上传
*/
$scope.uploadFiles = function (files) {
if (files && files.length) {
fileNames='';
fileContents='';
for(var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
console.log(i);//输出会是i最后一个值,循环几个就输出几个,注意这个地方。不要用这个做测试。
console.log(file.name);//输出会发现, 你选择几个图片, 就会显示几个图片名称。
fileNames+=file.name+",";
fileContents+=this.result+"wgy";
$scope.fileName=fileNames;//利用angular的双向绑定,把文件名赋值给scope在前端显示 };
})(f);
reader.readAsDataURL(f);
}
}
}
相关推荐
多图片上传
swfupload是比较著名的图片上传工具,可以多图片上传,在一次开发中偶遇uploadify,比swfupload还强大好用,选项也很丰富,功能也很强大,再配合ajax技术,可以把多图片上传发挥到极致,我曾用它做多图片上传,上传...
html多图片上传并在线预览 用javascript实现
资源名:asp实现多图片上传并预览功能程序源码.zip 资源类型:程序源代码 源码说明: 基于asp的多图片上传功能 并实现预览功能的程序源码 包含完整代码和注释很适合学习借鉴 适合人群:新手及有一定经验的开发人员
jquery多图片上传预览 好用 jquery多图片上传预览
多图片上传 中国讯网整理 适合上传的学习
php多图片上传jQuery插件plupload
Android多图片上传
这是一个多图片上传的例子,平时我们使用html的file控件一次只能上专一张图,一来操作麻烦,二来...现在我在这提供了一个多图片上传的例子(里面可以修改上传文件的后缀,所以这里也可以是多文件上传),希望大这有满意
.net 多图片上传,视图
多图片上传,排序 多图片上传,排序 多图片上传,排序 多图片上传,排序
一款PHP多图片上传 用AJAX+Jquery进行多图片上传软件
java 多图片上传
MultipartFile上传图片(多图片上传)
bootstrap modal弹出层加PHP多图片上传演示和下载,PHP读取远程图片并下载到本地。 演示请看http://www.sucaihuo.com/php/1268.html
多图片上传jq 前端部分
jquery多图片上传 可加可删除,解决h5在安卓里面不能图片多选问题。
thinkphp 多图片上传,违禁词禁用,违禁词自定义,前端,jQuery图片批量上传支持多图片上传预览插件