在声明只接受输入中的图像文件后，我仍然可以选择任何文件
在声明只接受输入中的图像文件后，我仍然可以选择任何文件
提问于 2019-10-31 19:50:44
这是我的表格：
<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/*定义输入应该只接受图像。但它唯一能做的就是用一个图像过滤器打开文件管理器，但我仍然可以切换到所有文件并选择一个非图像文件。有没有办法避免这种情况？
第二个问题是表单验证。如果表单无效，我会禁用该按钮，并使用[disabled]="!optionsForm.valid".I将所需的属性添加到输入中，这样就会使表单无效，如果没有选择任何输入，则禁用按钮，但它当前并没有这样做。即使我没有选择任何文件，该表单仍然有效。
回答 1
Stack Overflow用户
发布于 2019-10-31 19:54:08
您还可以为图像指定扩展名，如下所示。这将只允许为文件选择和上传指定的扩展名。我希望这对你有用。
<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/x-png,image/gif,image/jpeg" 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58642742
复制相关文章
相似问题
腾讯云开发者
