Question

我已经看过很多关于样式输入类型文件的问题但是我无法找到角度来做它。

那么如何在角度应用内部设置输入类型文件？

这是我的代码里面和html页面：

<input type="file" ngf-select ng-model="vm.attachment" name="file" accept="application/pdf" ngf-max-size="5MB" ngf-model-invalid="errorFile">

我已经尝试过（在输入文件hidde之后）：

<md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button>

link (scope, element, attrs) {
  const input   = element.find('#fileInput');
  const button = element.find('#uploadButton');

  if (input.length && button.length) {
    button.click((e) => input.click());
  }
}

但它不起作用，我的链接功能不起作用，因为我使用控制器并在页面内部检索错误，如果我把这个功能

Answer 1

您可以在按钮上使用ngf-select指令 - 查看其github文档页面中的示例：https://jsfiddle.net/danialfarid/xxo3sk41/590

ng-model文件具有name属性，可用于显示文件名：

<button ngf-select ng-model="picFile" accept="image/*"> Select Picture</button>
File name: {{picFile.name}}

Answer 2

设置输入文件的样式并不常见。我更喜欢隐藏它，设置自定义组件并将其事件指向输入文件。所以，我可以根据需要设置这个组件的样式。

隐藏输入文件

使用display：none隐藏它

<input type="file" id="input-file" name="file" style="display: none">

我的自定义组件

添加一个onclick事件，所以点击此处将指向我们的输入文件。

<md-button onclick="document.querySelector('#input-file').click()" class="md-raised md-primary"> Choose Files </md-button>

就是这样，直到这里工作完成。但是，如果我们还想捕获文档的名称，请将onchange事件添加到输入文件中。

<input type="file" onchange="angular.element(this).scope().onchange(this)" id="input-file" name="file" style="display: none">
<span>{{theFile.name}}</span>

$scope.onchange = function (sender) {
  $scope.$apply(function($scope) {
    $scope.theFile = sender.files[0]; 
  });
}

Angular如何设置输入类型文件的样式

2 个答案: