本文实例为大家分享了angularjs上传多张图片并预览的具体代码，供大家参考，具体内容如下
directive.js
/*
* 多图片上传及预览指令(需指定图片类名)
*
*/
angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) {
return {
restrict:'A',
link:function(scope, element, attrs, ngModel) {
var model = $pars
在AngularJS中实现多张图片上传并预览功能，我们可以借助自定义指令和工厂服务来完成。这个功能允许用户选择图片文件，然后实时预览所选的图片，为用户提供友好的交互体验。以下是对给定代码的详细解释：
我们创建一个名为`fileModel`的自定义指令。这个指令的主要作用是监听`input[type=file]`元素的`change`事件，当用户选择图片后，读取文件并更新模型。在`directive.js`文件中：
```javascript
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);
});
});
}
};
}]);
```
在这个指令中，我们使用`$parse`服务解析`fileModel`属性，获取到模型的setter方法。`imgviewID`用于获取需要预览图片的`img`元素，`fileReader`服务则负责将文件读取为Data URL，以便在页面上预览。
接着，我们定义了一个`fileReader`服务，它使用`$q`服务来处理异步操作，包括读取文件和处理错误。这个服务提供了一个`readAsDataUrl`方法，用于读取文件并返回一个包含Data URL的Promise对象：
```javascript
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部分，我们需要将`fileModel`指令添加到`input[type=file]`元素上，并指定`imgViewId`属性，这样当用户选择文件时，预览的图片会自动更新：
```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>
</section>
```
在这里，`ng-src`指令用于显示已上传图片的URL，而`file-model`指令与`img-view-id`属性用于实现图片预览。
总结起来，这个AngularJS实现的多张图片上传并预览功能利用自定义指令和工厂服务，实现了文件选择、模型绑定以及图片Data URL的实时预览。用户可以通过点击编辑按钮选择新的图片，预览框会立即展示新选择的图片。这种设计使得用户在上传证件照片或其他重要图片时，能方便地查看和验证所选图片是否正确。
