angularjs Angular如何对输入类型文件进行样式化

1zmg4dgp 于 6个月前发布在 Angular

关注(0)|答案(3)|浏览(56)

我已经看到了许多关于输入类型文件样式的问题，但我找不到用angular来做。
那么，我如何在一个Angular 应用程序中设置输入类型文件的样式呢？
这是我的代码和html页面：

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

字符串
我已经试过了（在我的输入文件隐藏之后）：

<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());
  }
}

型
但它不工作，我的链接功能不工作，因为我使用的控制器和内部的页面检索错误，如果我把这个函数

angularjs

来源：https://stackoverflow.com/questions/42557565/angular-how-to-style-input-type-file

3条答案

按热度按时间

ujv3wf0j1#

您可以在按钮上使用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}}

字符串

赞(0）回复(0）举报 6个月前

tzdcorbm2#

样式化输入文件并不常见。我更喜欢隐藏它，设置一个自定义组件并将其事件指向输入文件。因此，我可以尽可能多地样式化此组件。

隐藏输入文件

使其隐藏显示：无

<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]; 
  });
}

的字符串

赞(0）回复(0）举报 6个月前

n53p2ov03#

这是另一种方法

input[type=file]::file-selector-button {
  cursor: pointer;
  border: 0;
  padding: 8px;
  color: white;
  background-color: rgb(91, 105, 194);
  border-radius: 8px;
}

input[type=file]::file-selector-button:hover {
  background-color: rgb(54, 61, 115);
}

个字符

赞(0）回复(0）举报 6个月前

我来回答

angularjs Angular如何对输入类型文件进行样式化

3条答案

相关问题

热门标签

最新问答