Angularjs如何实现多图片上传预览功能

AngularJS是一个JavaScript框架，采用MVVM模式，主要用来构建单页面应用。它是以数据和DOM的双向绑定为核心特性，支持简洁的模板语法，可以快速构建web应用程序。在这里，我们将介绍如何使用AngularJS实现多图片上传预览的功能。

1. HTML页面

首先，在HTML页面中，我们需要一个多文件上传的输入框，一个用于显示预览图片的区域。

<input type="file" multiple ng-model="selectedFiles" ng-change="onFileSelected()">
<div ng-repeat="image in images track by $index">
  <img ng-src="{{image}}" />
</div>

2. AngularJS指令

在AngularJS中，我们可以使用指令来定义自定义标签和属性。指令可以改变DOM的结构和行为，可以为元素添加行为和事件处理程序。这里我们将创建一个指令用来处理文件上传和预览的功能。

app.directive('fileModel', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var model = $parse(attrs.fileModel);
      var modelSetter = model.assign;
      element.bind('change', function () {
        scope.$apply(function () {
          modelSetter(scope, element[0].files);
        });
      });
    }
  };
}])

这个指令是基于AngularJS自带的ng-model指令实现的，但是它增加了一个触发change事件来处理文件的选择和上传，同时与控制器通信以更新模型的值。

3. 控制器

我们需要在控制器中定义一些方法来处理文件上传和预览的功能。这些方法将复制已选择文件的内容并将其预览添加到DOM中。

app.controller('mainCtrl', function ($scope, $http) {
  $scope.selectedFiles = [];
  $scope.images = [];

  $scope.onFileSelected = function () {
    for (var i = 0; i < $scope.selectedFiles.length; i++) {
      var file = $scope.selectedFiles[i];
      var reader = new FileReader();

      reader.onload = function (event) {
        $scope.$apply(function () {
          $scope.images.push(event.target.result);
        });
      };
      reader.readAsDataURL(file);
    }
  };
  
  $scope.upload = function () {
    var formdata = new FormData();
    for (var i = 0; i < $scope.selectedFiles.length; i++) {
      formdata.append('file', $scope.selectedFiles[i]);
    }
    $http.post('/upload', formdata, {
      transformRequest: angular.identity,
      headers: { 'Content-Type': undefined }
    });
  };
})

在这个控制器中，我们创建了两个重要的方法：一个用来获取用户选择的所有文件并进行预览的onFileSelected方法，另一个是用来上传文件的upload方法。当用户通过上传按钮提交后，upload方法将通过$http.post()方法发送请求，在服务器端进行处理。

4. 总结

这样，我们就成功地通过AngularJS实现了多文件上传和预览的功能。简单言之，这个应用程序的工作流程就是：

1. 用户选择文件，点击上传按钮将文件上传至服务器，展示在预览区域中。

2. 控制器中的upload方法将发送文件的内容以FormData对象的方式提交至服务器。

3. 服务器端接收请求并处理文件。

4. 处理完毕后，服务器将响应结果返回给前端。

在AngularJS中，实现多文件上传和预览功能并不难，只需使用一些现成的JavaScript库即可。AngularJS框架的实现大幅提高了交互性和用户体验。AngularJS帮助我们构建动态的、响应式的web应用程序，并提供了一种简单的方式来管理面向数据和MVVM模式的前端开发。