Question

Ich möchte gleichen die Schaltfläche Durchsuchen Klasse dargestellt wird als Schaltfläche Upload: classname = ‚Taste-normal‘, was soll ich

<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

ich tat Mit <label htmlFor=[fileInputID] ....> können Sie die Schaltfläche "Durchsuchen" vorgeben und steuern, die echte Schaltfläche "Durchsuchen" verbergen und eine neue deaktivierte Eingabe hinzufügen, um den Namen der hochgeladenen Datei anzuzeigen.

Obwohl ich das Etikett sieht aus wie Button, es ist immer noch nicht ganz wie ein Knopf, ich hoffe, die Art der Eingabe ist "Knopf", kann aber immer noch das gleiche wie htmlFor, dankbar, wenn Sie eine Idee zu teilen haben .

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>