Реагировать пользовательскую кнопку просмотра с выбранным файлом показывается

Question

Я хочу кнопку просмотр класса такого же, как кнопка загрузки: = имя класса «Кнопка-нормальный», что я должен делать

<form name="uploadForm"> 
 
    <input name='uploadFile' id='uploadFile' type='file' style={{marginTop: '1%'}} onChange={this.check}/> 
 
    <br/> 
 
    <input type="button" value="Upload" style={{marginTop: '1%'}} className='button-normal' onClick={this.upload}/> 
 
</form>

Answer 1

я сделал используя <label htmlFor=[fileInputID] ....>, чтобы притворяться и управлять кнопкой «Обзор», скрывать реальную кнопку «Обзор» и добавлять новый отключенный ввод, чтобы показать имя загруженного файла.

Однако, хотя я сделал ярлык похожим на кнопку, он все еще не совсем похож на кнопку, я надеюсь, что тип ввода «кнопка», но все равно может работать так же, как htmlFor, благодарен, если у вас есть идея поделиться ,

check: function() { 
 
document.getElementById("name").placeholder = document.getElementById("uploadFile").files[0].name; 
 
    }, 
 
/// 
 
<form> 
 
<input name='uploadFile' id='uploadFile' type='file' style={{marginTop: '8px', fontSize:'17px', float: 'left'}} onChange={this.check} display= 'none' /> 
 
<label className='button-normal' style={{margin: '5px 5px 5px 5px', float: 'left'}} htmlFor='uploadFile'>Browse</label> 
 
<input id="name" placeholder="No file selected" style={{fontSize: '17px', marginTop:'7px'}} disabled="disabled"/> 
 
<input type="button" value="Upload" styles={{marginTop: '1%', float: 'left'}} className='button-normal' onClick=={this.upload}/> 
 
</form>