1 回答

TA貢獻1804條經驗 獲得超8個贊
您的 PDF 文件輸入標簽使用與縮略圖輸入相同的 ID。為每個輸入分配不同的 ID,然后分別將標簽與它們相關聯:
<label
class="btn btn-outline-primary btn-sm btn-block"
for="my-file-selector">
<input
formControlName="thumbnailFile"
id="my-file-selector"
type="file"
(change)="onFileSelected($event)"
name="image"
accept="image/x-png,image/gif,image/jpeg"
style="display: none"/>
<i class="fa fa-upload" aria-hidden="true"></i>
Browse: Upload a Photo
</label>
</div>
<div class="form-group p-2">
<label for="exampleInputEmail1">Upload Magazine PDF</label>
<br />
<label
class="btn btn-outline-primary btn-sm btn-block"
for="my-file-selector2"
>
<input
formControlName="pdfFile"
id="my-file-selector2"
type="file"
(change)="onPDFFileSelected($event)"
name="image"
accept="image/x-png,image/gif,image/jpeg"
style="display: none"
/>
<i class="fa fa-upload" aria-hidden="true"></i>
Browse: Upload a Photo
</label>
</div>
解釋
<label>可以與單個<input>直通for屬性相關聯,例如
<label for="imageInput">Image Input</label>
<input id="imageInput">
如您所知,一旦關聯,您的標簽將與單擊時的文件輸入相同?,F在假設我們有兩個輸入,我們將它們定義如下:
<label for="imageInput">Image Input</label>
<input id="imageInput">
<label for="pdfInput">PDF Input</label>
<input id="pdfInput">
每個輸入都有唯一的 ID,并通過該 ID 關聯一個標簽。你得到錯誤的原因是因為你對兩個標簽使用了相同的 id,在我們的例子中:
<label for="imageInput">Image Input</label>
<input id="imageInput"/>
<label for="imageInput">PDF Input</label>
<input id="pdfInput"/>
請注意,這兩個 for屬性具有相同的值imageInput?,F在發生的是,當您單擊第二個標簽(PDF 輸入)時,它將代表imageInput輸入而不是pdfInput.
進一步閱讀:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
添加回答
舉報