Html 在声明只接受输入中的图像文件后，我仍然可以选择任何文件

这是我的表格：

<form #optionsForm="ngForm" novalidate (ngSubmit)="saveOptions()" id="optionsForm">
  <div class="modal-body">
    <div class="form-group">
      <label for="customFile">Icon</label>
      <div class="custom-file">
        <input type="file" accept="image/*" class="custom-file-input" id="customFile" 
               name="customerFile" (change)="handleFileInput($event.target.files)" required>
        <label class="custom-file-label" for="customFile" 
               id="customerFileLabel">Select Icon</label>
      </div>
    </div>
    <div *ngIf="logo.imageInBase64" class="row">
      <label id="previewLabel">Preview:</label>
      <div class="report-logo">
        <img alt="{{logo.name}}" src="{{logo.imageInBase64}}" class="logo-image">
      </div>
    </div>
    <button type="submit" class="btn btn-secondary" aria-hidden="true" 
            [disabled]="!optionsForm.valid">
      <i class="fa fa-floppy-o"></i> Save
    </button>
  </div>
</form>

偶像
选择图标
预览：
拯救

这就是不选择文件和选择文件时的外观：

我现在有两个问题。首先，我尝试用

accept=“image/*

定义输入只接受图像。但它所做的唯一事情是用图像过滤器打开文件管理器，但我仍然能够切换到所有文件并选择非图像文件。有没有办法避免这种情况

---

第二个问题是formvalidation。如果表单无效，我会使用

[disabled]=”禁用该按钮！optionsForm.valid“

。我将所需属性添加到输入中，因此如果未选择任何输入，则应使表单无效并禁用按钮，但它当前没有这样做。即使我没有选择任何文件，表单仍然有效。

您也可以使用下图指定扩展名。这将只允许文件选择和上载的指定扩展名。我希望这对你有用

偶像
选择图标
预览：
拯救

您还可以使用下图指定扩展名。这将只允许文件选择和上载的指定扩展名。我希望这对你有用

偶像
选择图标
预览：
拯救

您无法控制用户在上传器对话框中切换到“所有文件”。您无法控制用户在上传器对话框中切换到“所有文件”。