angular input file 上传文件

最新推荐文章于 2022-05-31 17:13:25 发布

转载最新推荐文章于 2022-05-31 17:13:25 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cench/p/5463708.html

文章标签：

#javascript #json #ViewUI

本文介绍了一个基于AngularJS的文件上传示例，通过自定义指令`ngFileModel`实现了文件选择后的实时预览与提交功能，并详细展示了如何使用FileReader API读取文件内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body >
<div ng-controller="fileCtrl">
  <form ng-submit="submit(obj)">
  <input type="file" ng-file-model="obj.testFile" />
  <input type="submit"  value="submit" />
  </form>
  Submitted File :
  <pre>
  
  </pre>
  </div>
  <script>
  angular.module("myApp", [])
      .controller("fileCtrl",["$scope", function($scope){
      $scope.submittedFile = {};
      $scope.obj = {};
      $scope.submit = function(obj){
      console.log(JSON.stringify(obj.testFile))
      
      }
      }])

    .directive("ngFileModel", [function () {
        return {
            scope: {
                ngFileModel: "="
            },
            link: function (scope, element, attributes) {
                element.bind("change", function (changeEvent) {
                    var reader = new FileReader();
                    reader.onload = function (loadEvent) {
                        scope.$apply(function () {
                            scope.ngFileModel = {
                                lastModified: changeEvent.target.files[0].lastModified,
                                lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
                                name: changeEvent.target.files[0].name,
                                size: changeEvent.target.files[0].size,
                                type: changeEvent.target.files[0].type,
                                data: loadEvent.target.result
                            };
                        });
                    }
                    reader.readAsDataURL(changeEvent.target.files[0]);
                });
            }
        }
    }]);
  </script>
</body>