多图片上传

注意事项:

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);  

}

}

}

猜你喜欢

转载自yingyingsheji.iteye.com/blog/2377126