码迷,mamicode.com
首页 > Web开发 > 详细

angular input file 上传文件

时间:2016-05-06 00:09:52      阅读:378      评论:0      收藏:0      [点我收藏+]

标签:

<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>

 

angular input file 上传文件

标签:

原文地址:http://www.cnblogs.com/cench/p/5463708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!