在 AngularJS 中上传文件

file upload in angularjs

本文关键字：文件 AngularJS      更新时间：2023-09-26

我是 angularjs 的新手，并试图实现简单的文件上传，但我在尝试从控制器访问文件时将文件束缚为未定义

文章.html

<section data-ng-controller="ArticlesController" data-ng-init="find()">
    <div class="page-header">
    </div>
    <div >
        <input type="file" file-model="myFile"/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
</section>

以下是我尝试访问文件对象的控制器

angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location','Authentication', 'Articles',
    function($scope, $stateParams, $location, Authentication, Articles) {
        $scope.authentication = Authentication;
        $scope.uploadFile = function() {
            console.log('came here');
            var file = $scope.myFile;
        console.log('file is ' + file);
        };
}
]);

编辑：

我尝试使用 https://github.com/ghostbar/angular-file-model 并使用 meanjs 样板代码

其中一个步骤是在html页面中包含angular-file-model.js。添加到您的 HTML 文件：

我应该包含在哪个文件中以及如何包含角度文件模型.js文件。

使用Angular的文件输入并不是那么简单。您需要使用此处引用的外部库。

我个人使用BlueImp FileUpload：https://blueimp.github.io/jQuery-File-Upload/angularjs.html

您似乎正在使用角度文件模型

他们也有Plunker，这工作得很好。您是否遵循了他们在 git 中提到的所有步骤？检查您是否在主模块中注入了文件模型依赖项，例如：

 angular.module('articles', ['file-model']);

我多次使用Danial Farid的Angular File Upload，并取得了巨大的成功。

https://github.com/danialfarid/angular-file-upload

angular.module('myApp').directive('fileModel', ['$window',function ($window) {
    return {
       restrict: 'A',
       require:'ngModel',
       link: function(scope, element, attrs,ngModel) {
          element.bind('change', function(){
              scope.$apply(function(){
                  var r = new FileReader();
                  r.onloadend = function(){
                      var svg = r.result;
                      ngModel.$setViewValue($window.btoa(svg));
                    ngModel.$render();
                  };
                  var file = element[0].files[0];
                  if(file !== undefined){
                      if(file.type === 'image/svg+xml' || file.type === 'image/svg'){
                          ngModel.$setValidity('svgimage', true);
                          r.readAsDataURL(file);
                      }else{
                          ngModel.$setValidity('svgimage', false);
                          ngModel.$setViewValue(' ');
                          ngModel.$render();
                      }
                var value = element[0].value ; 
                          value = value.substr(value.lastIndexOf('''') + 1,value.length);
                          document.getElementById('fileurl').value = value;
                          document.getElementById('fileurl').title = value;
                  }
             });
          });
       }
    };
}]);
<input ng-model="icon.icon" file-model class="form-control upload" type="file"  required/>
相关文章：