angularjs实现多张图片上传并预览功能

前端之家收集整理的这篇文章主要介绍了angularjs实现多张图片上传并预览功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下

directive.js

图片上传及预览指令(需指定图片类名) * */

angular.module('routerModule').directive('fileModel',['$parse','fileReader',function($parse,fileReader) {
return {
restrict:'A',link:function(scope,element,attrs,ngModel) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
var imgviewID = attrs["imgViewId"];
var imgView = angular.element(document.querySelector("."+imgviewID));
element.bind('change',function(event) {
scope.$apply(function() {
modelSetter(scope,element[0].files[0]);
});
//附件预览
scope.file = (event.srcElement || event.target).files[0];
fileReader.readAsDataUrl(scope.file,scope).then(function(result) {
imgView.attr("src",result);
});
});
}
}
}]);

angular.module('routerModule').factory('fileReader',["$q","$log",function($q,$log) {
var onLoad = function(reader,deferred,scope) {
return function() {
scope.$apply(function() {
deferred.resolve(reader.result);
});
}
}

var onError = function(reader,scope) {
return function() {
scope.$apply(function() {
deferred.reject(reader.result);
});
};
};

var getReader = function(deferred,scope) {
var reader = new FileReader();
reader.onload = onLoad(reader,scope);
reader.onerror = onError(reader,scope);
return reader;
};

var readAsDataURL = function(file,scope) {
var deferred = $q.defer();
var reader = getReader(deferred,scope);
reader.readAsDataURL(file);
return deferred.promise;
}
return {
readAsDataUrl: readAsDataURL
};
}
]);

html关键代码

法人证件
身份证正面

点击编辑
身份证反面

点击编辑

controller.js中发送到后台的数据

});

预览如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章