zoukankan html css js c++ java

angular input file 上传文件

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

查看全文

相关阅读:
按不同通道加载不同弹幕数据的实现方法
 webpack手动配置Vue项目
 flex布局是什么？
npm packson.json介绍
 npm使用介绍
 Vue路由机制
 VUE双向绑定原理
 常用API接口汇总
 C# MVC权限验证
 C# 正则表达式大全

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