Question

나는 다음과 같은 구조가 업로드 할 파일을 선택할 수있는 팝업, 만든을 선택하면 파일 이름을 얻기 :

<div id = 'upload_container'> 
    <span id = "close_btn">X</span> 
    <!--Content--> 
    <input type = 'file' id = 'upload_hidden' name = 'file_to_upload'> 
    <p id = 'upload_container_text'>Choose a file to upload</p> 
    <p id = 'file_name'><?php echo $file_name ?></p> 
    <!-- // --> 
</div> 

내가 파일이 선택 창을 유발하는 방법을 "업로드 할 파일 선택"을 클릭하여 숨겨진 파일 입력에 대한 클릭 이벤트를 트리거합니다.

지금하고 싶은 것은 ID가 인 단락에서 선택한 파일 이름을 'file_name'으로 표시하는 것입니다.

$file_name = ""; 
if(isset($_FILES['file_to_upload'])){ 
    $file_name = $_FILES['file_to_upload']['name']; 
} 

및 단락에 내가 추가 : 내가 뭘 시도 것은

<p id = 'file_name'><?php echo $file_name ?></p> 

을하지만 아무 일도 일어나지 않습니다. 어떤 아이디어?

감사합니다.

Answer 1

업로드를 위해 선택한 파일의 파일 이름을 얻으려면 javascript를 사용하십시오. 입력 한 파일에 onchange 리스너를 첨부하고 파일 이름을 가져 와서 단락으로 출력하십시오.

입력 파일이 숨겨져 트리거

<input type='file' id='file' onchange='getFileData(this)'/> 

<script> 
function getFileData(object){ 
var file = object.files[0]; 
var name = file.name;//you can set the name to the paragraph id 
document.getElementById('file_name').value=name;//set name using core javascript 

} 

</script> 

Answer 2

,이 코드를 호출 할 수 있습니다 : 클라이언트 측을 통해 파일 이름을 얻기 위해

$('#upload_container_text').click(function(){ 
    $('#upload_hidden').trigger('click'); 
} 

을, 당신은 그것으로 시도 할 수 있습니다 :

$('#upload_hidden').change(function(){ 
    var reader = new FileReader(); 
    reader.onload = function(e){ 
    $('#filename').text(e.name); // or you can pass this.files[0]; 
    } 
    reader.readAsDataURL(this.files[0]); 
    $(this).val(reader); 
}); 

서버 측에서 파일 이름을 얻으려면 :

1. 양식 파일 이름과 $ _GET와 URL을
2. 가져 오기 파일 이름 atribute 조치를 엉덩이 ID 파일 이름 페이지에서 [ '파일']
3. 에코 $ _GET을 [ '당신은 파일'] });