本文实例为大家分享了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, deferred, scope) {
return function() {
scope.$apply(function() {
deferred.reject(reader.result);
});
};
};
var getReader = function(deferred, scope) {
var reader = new FileReader();
reader.onload = onLoad(reader, deferred, scope);
reader.onerror = onError(reader, deferred, 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中发送到后台的数据
$scope.postData = {
dealerId: $scope.dealer.dealerId,
companyName: $panyName,
companySize: $panySize,
idCardFace: angular.element(document.querySelector(".idCardFace"))[0].src,
idCardBack: angular.element(document.querySelector(".idCardBack"))[0].src
};
$http.post('updateDealerCertificate',$scope.postData).success(function(data){
});
预览如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
