angularjs上传多张图片并预览

来源：互联网发布：真牛皮包淘宝网编辑：程序博客网时间：2024/05/24 03:19

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关键代码

<section class="infogroup">    <h4>法人证件</h4>    <div class="row relatedCard">        <div class="col-md-4 txtcenter">            <p>身份证正面</p>            <div><img ng-src="showImg/{{dealer.idCardFace}}" class="idCardFace" enlarge-pic/></div>            <span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑                 <input type="file" file-model="idCardFace" img-view-id="idCardFace" />            </span>         </div>        <div class="col-md-4 txtcenter">            <p>身份证反面</p>            <div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarge-pic/></div>            <span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑                 <input type="file" file-model="idCardBack" img-view-id="idCardBack" />            </span>         </div>                                          </div></section>

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){<!-- 成功执行代码 -->});

预览如下：

0 0