파일 필드를 사용하여 업로드 한 파일을 여는 방법

Question

사용자가 첨부 파일을 업로드 할 수있는 파일 업로드 필드가있는 양식을 작성 중입니다. 양식을 제출하기 전에 첨부 된 첨부 파일을 사용자가 검사 할 수있는 방법을 제공하고자합니다. 따라서 버튼을 클릭하면 파일 필드를 사용하여 선택한 파일이 새 창에서 열립니다. 파일 필드에서 window.open 호출에 데이터를 제공하는 방법을 파악할 수 없었습니다. 다음은 작동하지 않습니다

$("#view_attachment_btn").on('click', function() {  
    var fr = new FileReader(); 
    fr.onload = function() { 
     window.open(fr.result); 
    }; 
    fr.readAsDataURL($("#file_upload_field").val()); 
} 

Answer 1

, 당신은 일반 자바 스크립트를 사용해야합니다 JS 파일 API를 사용하여 선택한 파일에 액세스하려면 : 당신은 사용하여 JS 객체를 가져 오기합니다

$("#file_upload_field").val()이 C:/fakepath/xxx

를 반환합니다 get(0) 인 경우에만 .files 속성을 사용하여 실제 선택한 파일에 액세스 할 수 있습니다. 그러면 선택한 파일의 배열이 반환됩니다. 첫 번째 선택한 파일을 가져 오려면 [0]을 추가하십시오.

$("#view_attachment_btn").on('click', function() {  
    var fr = new FileReader(); 
    fr.onload = function() { 
     window.open(fr.result); 
    }; 
    fr.readAsDataURL($("#file_upload_field").get(0).files[0]); 
}