로컬 파일을 읽기를 클릭, HTML 사업부의 콘텐츠

<! DOCTYPE HTML > 
< HTML > 
< DIV ID = "컨테이너"   의 onclick = "choosefile ();" > < DIV의 스타일 = "텍스트 정렬 : 센터" > 드래그 앤 업로드 여기에 파일을 놓습니다. </ DIV > < 입력 타입 = "파일" ID = "file0" 스타일 = "디스플레이 : 없음" 의 onchange = "selectedFile ();" > </ DIV > </ HTML > <
    
    




{ 
    최소 폭 : 400 픽셀 , 
    최소 높이 : 280px ; 
    국경 : 2 픽셀 점선 # 000 ; 
    -moz 국경 - RADIUS : 8px ; 
    배경 색 : 노란색 ; 
} 
</ 스타일 > 


< 스크립트 유형 = "텍스트 / 자바 스크립트" > 
기능 choosefile () {
        var에 F = document.getElementById를 ( " File0 " ); 
       f.click (); //들이 숨겨져 있기 때문에, 함수 호출이 매뉴얼을 모방하는 클릭 이벤트를 사용하도록 
} 

기능selectedFile () {
     IF ( 1. ) {
         VAR selectedFile = document.getElementById를 ( ' File0 ' ) .files [ 0 ]
         VAR의 이름 = selectedFile.name; // 선택된 파일 이름 판독 
        VAR의 크기 = selectedFile.size; / / 선택한 파일의 읽기 크기 
        을 console.log ( " 파일 이름 : " + 이름 + " 크기 : " + 크기); 
    
        var에 리더 =  새로운 새로운 을 FileReader (); //이것은 판독 동작이 완료되는 핵심이다. 
        Reader.readAsText (selectedFile) // 파일의 내용을 판독, 파일은 URL을 판독 할 수 
        reader.onload =  함수 () {
             //를 완료 콜백 읽을 때 이 기능, 파일의 내용이 결과에 저장된이 시점에서, 바로 오퍼레이터 수 
            CONSOLE.LOG ( 이 본 .Result를); 
        } 
    } 
} 

</ 스크립트 >