angularjs实现多张图片上传并预览功能
directive.js
| 代码如下 | 复制代码 |
/* * 多图片上传及预览指令(需指定图片类名) * */
angular.module('routerModule').directive('fileModel', ['$parse','fileReader',function($parse, fileReader) { return{ restrict:'A', link:function(scope, element, attrs, ngModel) { varmodel = $parse(attrs.fileModel); varmodelSetter = model.assign; varimgviewID = attrs["imgViewId"]; varimgView = 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) { varonLoad =function(reader, deferred, scope) { returnfunction() { scope.$apply(function() { deferred.resolve(reader.result); }); } }
varonError =function(reader, deferred, scope) { returnfunction() { scope.$apply(function() { deferred.reject(reader.result); }); }; };
vargetReader =function(deferred, scope) { varreader =newFileReader(); reader.onload = onLoad(reader, deferred, scope); reader.onerror = onError(reader, deferred, scope); returnreader; };
varreadAsDataURL =function(file, scope) { vardeferred = $q.defer(); varreader = getReader(deferred, scope); reader.readAsDataURL(file); returndeferred.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){ }); | |
预览如下：
