在 AngularJS 中显示来自 <input> 的选定文件答案

【问题标题】：Displaying a selected file from an <input> in AngularJS在 AngularJS 中显示来自 <input> 的选定文件
【发布时间】：2015-11-28 15:33:55
【问题描述】：

我有一个使用标准 Javascript 的工作示例，但我想使用 AngularJS 使其更本机地工作。

具体来说，我需要用用户选择的文件的文件名来更新 span。

这是我使用原生 Javascript 实现的：

<span>
    <input  ng-model="uploadDownloads" type="file" style="visibility:hidden; width: 1px;" id=uploadDownloads name=uploadDownloads onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))"  /> <!-- Chrome security returns 'C:\fakepath\'  -->
    <input  class="btn btn-primary" type="button" value="choose file" onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
    <span  class="badge badge-important" ></span>
</span>

filereader 功能已经有角度了：

$scope.add = function(valid){
        if(valid){
                $scope.data = 'none';
                var f = document.getElementById('uploadDownloads').files[0];
                var r = new FileReader();
                r.onloadend = function(e){
                    $scope.data = e.target.result;
                    $scope.notPass = false;
                    $modalInstance.close({
                        'data':$scope.data,
                        'fileName':$scope.fileName,
                        'fileExplain':$scope.fileExplain
                    });
                };
            /*activate the onloadend to catch the file*/
                r.readAsBinaryString(f);
        } else {
            $scope.notPass = true;
        }
    };

问题是使用 Angular 而不是 JavaScript 来激活 onclick 和 onchange，以便我的 <span> 使用所选文件名进行更新。

【问题讨论】：

这里的确切问题是什么？此外，您的代码不是 AngularJS 的惯用代码。您应该考虑使用 ng-change 和 ng-click。另外，如果你正在修改 DOM，你应该考虑使用指令。
我想做和这里一样的东西，但是有角度
好的，我现在明白了。你看过这个stackoverflow问题和答案吗？ stackoverflow.com/questions/18571001/…
不是我不能做的上传，是把文件名加到span
你看过这篇文章了吗？：stackoverflow.com/questions/17213526/…

标签： javascript angularjs filereader

【解决方案1】：

这个问题建立在现有的question and answer 之上。但是，具体来说，我已经修改了 that answer 的代码，以适应这里似乎是特定的问题，即如何更新 <span> 以让用户以 angularjs 惯用的方式选择文件名。

这是一个 codepen 和一个工作示例。

这是html文件的相关部分：

<body ng-controller="AppController">
    <input ng-model="uploadDownloads" type="file" fd-input file-name="fileName"/> 
    <span class="badge badge-important">Output here: {{fileName}}</span>
</body>

这里的关键是您有一个名为fd-input 的自定义指令，它具有到它定义的一个名为file-name 的属性的双向绑定。您可以将您的$scope 变量之一传递给该属性，该指令会将文件名绑定到它。这是控制器和指令。

(function() {
  'use strict';

  angular.module('app', [])
    .controller('AppController', AppController)
    .directive('fdInput', fdInput);

  function AppController($scope) {
    $scope.fileName = '';
  }

  function fdInput() {
    return {
      scope: {
        fileName: '='
      },
      link: function(scope, element, attrs) {
        element.on('change', function(evt) {
          var files = evt.target.files;
          console.log(files[0].name);
          console.log(files[0].size);

          scope.fileName = files[0].name;
          scope.$apply();
        });
      }
    }
  };

})();

如上所述，该指令直接取自another SO answer。我已经对其进行了修改以添加一个范围，该范围可以双向绑定到 file-name 属性：

...
return {
  scope: {
    fileName: '='
  },
...

然后我将files[0].name 分配给双向绑定：

...
scope.fileName = files[0].name;
scope.$apply();
...

检查代码笔。那应该这样做。您可以只在指令中使用父作用域，但这不是一个好主意，因为它限制您在每个控制器中使用该指令一次。此外，如果您想列出多个文件，则必须更新此代码以返回这些文件的数组。

希望对您有所帮助。

【讨论】：

好的，所以我将它添加到我的 html 代码和我的角度控制器中，但它没有工作。但是当我在一些 test.html 和 test.js 中尝试它时，它起作用了。我认为它可能不起作用，因为我在 angular-ui modal 中使用它。它确实上传了文件，但没有显示名称，我认为由于某种原因它不会触发指令。
不幸的是，这是一个不同的问题，偏离了这个问题的背景。我的建议是这个答案可以解决您的问题（如果该解决方案是单独工作的），您应该继续搜索 Stackoverflow 以找到正确共享您的 $scope 与您的 angular-ui 模态的解决方案。您快到了！ :) 如果您不介意，请将其标记为已回答，这样当社区四处寻找要回答的问题时，它就不会显示为未回答。祝你好运！
中的 :file-name="fileName" 是什么？
阅读指令文档：(docs.angularjs.org/guide/directive) - 在指令中有一个属性 scope 在返回的对象中有一个属性为 fileName: '=' 的对象 - 创建一个支持两个方式绑定。您将$scope.whatever 属性传递给该属性，然后指令将结果绑定到（scope.fileName = files[0].name;）...如果您将$scope.test 传递给file-name 属性，该指令将files[0].name 绑定到$scope.test . scope.$apply() 然后触发一个摘要循环，以便在您的视图中更新。