隠し入力からテキストをキャプチャして表示する

Question

私は<input type="file" />.のボタンテキストを変更するのにthis solutionを使用しますが、それは機能しますが、小さな欠点があります。ファイルが選択された後、ユーザーは選択されたファイル表示されません（元のボタンで隠されています）。元の（非表示の）ボタンを表示せずにこの情報を表示するにはどうすればいいですか？

コード：

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

Answer 1

あなたはファイルのあなたのinput型の値に無いことで、テキスト、その後updateその値でspanを作成することができます。

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

ような何かあなたがあなたの目に見える入力下のプレースホルダ要素を追加することができます。そして、

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

（私はこの部分のためにjQueryを使用）、イベント側：

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