多图片上传

注意事项：

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

}

}

}