注意事项:
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);
}
}
}