업로드 양식에 선택한 파일 이름 표시

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을 DOM을 사용하여 javascript로 가져온 다음 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> 

자바 스크립트 :

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를 사용할 수 있습니다. 아래 코드는 자바 스크립트를 사용합니다.

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