Question

我希望浏览按钮类与上传按钮相同：className ='button-normal'，我该怎么办

<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>

响应自定义浏览按钮，显示所选文件

1 个答案: