Capture und Anzeige eines Textes von einem versteckten Eingang

Question

Ich benutze this solution, um den Button Text von <input type="file" />. ändern Es funktioniert, aber es hat einen kleinen Nachteil - nachdem eine Datei ausgewählt wurde, wird der Benutzer nicht sehen, welche Datei ausgewählt wurde, weil diese Informationen wird nicht angezeigt (es ist mit der ursprünglichen Schaltfläche ausgeblendet). Wie kann ich diese Informationen sichtbar machen, ohne die ursprüngliche (versteckte) Schaltfläche anzuzeigen?

Der Code:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" /> 
<input type="file" style="display:none;" id="file" name="file"/> 

Answer 1

Sie können ein span ohne Text in ihm erstellen und dann update sein Wert auf den Wert Ihres input Dateityp. So etwas wie

function showFileName(){ 
 
document.getElementById("fileName").innerHTML = document.getElementById("file").files[0].name 
 

 
}

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" /> 
 
<span id="fileName"></span> 
 
<input type="file" onChange="showFileName()" style="display:none;" id="file" name="file"/>

Answer 2

Sie können ein Platzhalter Element unter dem sichtbaren Eingang hinzufügen:

<p id="file_path"></p> 

Dann (I verwenden jQuery für diesen Teil), Veranstaltungen Seite:

​$('#file').change 
(
    function(e) 
    { 
     $('#file_path').text(e.target.files[0]); 
    } 
);​​​