如何在角形材质中使用输入类型文件

Question

如何在角形材质中使用输入类型文件

嗨，我正在使用棱角材料进行设计。当我在角形材质站点上时，没有输入类型文件元素。任何人都知道这一点。

Answer 1

如果您想要的只是一个显示良好的文件输入按钮，这是一种解决方法。

HTML

<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="onFileSelected()" #fileInput type="file" id="file">

零件

onFileSelected() {
  const inputNode: any = document.querySelector('#file');

  if (typeof (FileReader) !== 'undefined') {
    const reader = new FileReader();

    reader.onload = (e: any) => {
      this.srcResult = e.target.result;
    };

    reader.readAsArrayBuffer(inputNode.files[0]);
  }
}

受此Angular Material Github问题评论的启发 https://github.com/angular/material2/issues/3262#issuecomment-309000588

Answer 2

Angular Material还不支持文件上载的解决方法。还有其他方法可以存档。例如使用外部库。

angular-material-fileupload：链接到npm包

支持的功能：

• 拖放
• 普通上传
• 进度条
• 文件大小等

ngx-material-file-input：链接到存储库

支持的功能：

• ngx-mat-file-input 组件，用于Angular Material内部 mat-form-field
• 一个FileValidator用maxContentSize，以限制文件大小
• 一ByteFormatPipe对在人类可读的格式格式化的文件大小
• 以及其他较小的次要功能...

更新资料

如果您只需要一种无需外部库的解决方法，请参见此处的答案 /sf/answers/3748249221/

Answer 3

基于@JackMorrissey的答案，我找到了一个更简化的解决方案：

HTML：

<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="onFileSelected($event)" #fileInput type="file">
<span class="file-name">{{selectedFile?.name}}</span>

打字稿：

selectedFile: any = null;

onFileSelected(event: any): void {
    this.selectedFile = event.target.files[0] ?? null;

}

CSS：

.file-name {
    margin-left: 1rem; /* or whatever margin you require */
}

输出：

Answer 4

我建议您查看@angular-material-components/file-input。

它非常符合角度材料标准。

Answer 5

使用 ::file-selector-button 来设置类型文件的默认输入元素的样式更有意义，使其看起来像角度材质按钮。此外，这种方式考虑了用户体验，让用户知道要上传的文件已通过显示文件名添加到表单中。

PS 样式是在检查角垫凸起按钮后从声明中复制的

input[type="file"]::file-selector-button {
  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
  background: #ffd740;
  box-sizing: border-box;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: baseline;
  text-align: center;
  margin: 0;
  min-width: 64px;
  line-height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  margin: 1rem;
}


/*  fallback for older browsers supporting the -webkit prefix */

input[type="file"]::-webkit-file-upload-button {
  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
  background: #ffd740;
  box-sizing: border-box;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: baseline;
  text-align: center;
  margin: 0;
  min-width: 64px;
  line-height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  margin: 1rem;
  font-weight: 500;
}

<form>
  <label for="fileUpload">Add file</label>
  <input type="file" id="fileUpload">
</form>