アップロードフォームに選択したファイルの名前を表示

Question

下の画像に示すように、選択したファイル名と拡張子を表示します。 これはすべてHTMLフォーム内で行われます。

私は、この目的のために見つけた最高のコードは、この（私は絵に示さも何）である：

<label for="uploaded_file">Vælg en fil:</label> 
<input type="file" name="uploaded_file"> 
<p>Valgt fil:</p> 
<?php 
    if(isset($_FILES['uploaded_file']['name'])) { 
     echo $_FILES['uploaded_file']['name']." was uploaded"; 
    }else{ 
     echo "No File Uploaded"; 
    } 
?> 

しかし、このコードは、それを表示しません。私はまだフォームを提出していないので、もちろん、それはしません。また、私はsom jQuery/Javascriptの機能を探していますが、私はそれに合ったものが見つからないか、私の目的に合っている可能性があります。

私の全体的な意志は後で私は複数のファイルのアップロードのために私のアップロードフォームを "アップグレード"します。

このスクリプトを動作させるにはどうすればよいですか？

Answer 1

アップロードされたファイルの名前は、inputをjavascriptでDOMから取り出し、valueプロパティにアクセスすることで取得できます。 inputにはユーザーが既にファイルを選択している必要があります。下の例では<button>クリックハンドラを使用してvalueを確認しています。

HTML：

<label for="uploaded_file">Vælg en fil:</label> 
<input id="file" type="file" name="uploaded_file"> 
<p>Valgt fil:</p> 

<button id="btn">Get File Name</button> 

はJavaScript：

var input = document.getElementById('file'); 

// Attach click handler to button. 
document.getElementById('btn').addEventListener('click', function() { 
    // Grab name of uploaded file (use the `value` property of the input element). 
    alert(input.value); 
}); 

Answer 2

変更イベントに使用することによって、あなたは拡張子でアップロードされたファイル名を取得することができます。 javascriptまたはjqueryを使用できます。以下のコードはjavascriptを使用しています

<label for="uploaded_file">Vælg en fil:</label> 
<input id="file" type="file" name="uploaded_file"> 
// added id for the tag to place the file name 
<p id="file_name">Valgt fil:</p> 

<script type="text/javascript"> 
    document.getElementById('file').onchange = function() { 
    var input = document.getElementById('file').files[0].name; 
    var p_tag = document.getElementById('file_name'); 
    p_tag.innerHTML = p_tag.innerHTML +' ' + input; 
} 

</script>