angular 上传图片并显示_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, 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: $scope.dealer.companyName,

companySize: $scope.dealer.companySize,

idCardFace: angular.element(document.querySelector(".idCardFace"))[0].src,

idCardBack: angular.element(document.querySelector(".idCardBack"))[0].src

};

$http.post('updateDealerCertificate',$scope.postData).success(function(data){

});

预览如下：

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