代码之家 › 专栏 › 技术社区 › Varun.S

如何使用AngularJS获取文件资源管理器中所选文件的URL

angularjs-scope angularjs-directive angularjs

Varun.S · 技术社区 · 6 年前

我需要点击选择文件并从文件资源管理器中选择文件,然后我需要获取所选文件的URL并将其存储在变量中。你能看看下面的代码并指导我,因为我是AnularJS的新手…提前谢谢。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body >
    <div ng-app = "myApp" ng-controller="myControl">
        <input type="file" file-model="myFile" ng-module = "file_name" ng-click = "file_name()"><br>
        <h1>{{file_name()}}</h1>
    </div>

    <script>
        var app= angular.module("myApp",[]);
        app.controller("myControl",function($scope){
            $scope.file_name = function(){
                return $scope.file_name;
            };
        });

    </script>
</body>
</html>

1 回复 | 直到 6 年前

Slava Utesinov 6 年前

url directive $watch file_name

angular.module('app', [])
  .controller('ctrl', ['$scope', function($scope) {
    $scope.$watch('file_url', function(newVal, oldVal) {
      if (newVal != oldVal)
        console.log(newVal);
    }, true)
  }])
  .directive('url', function() {
    return {
      restrict: 'A',
      scope: {
        url: '='
      },
      link: function(scope, element) {
        element.on('change', function(event) {
          var reader = new FileReader();
          reader.onloadend = function() {
            scope.$apply(function() {
              scope.url = reader.result;
            });
          }

          var file = element[0].files[0];
          if (file)
            reader.readAsDataURL(file);
        })
      }
    }
  })

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="ctrl">
  <img src="{{file_url}}" height="150" alt="Image preview...">
  <input type="file" url='file_url'>
</div>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前