버튼 클릭시 javascript 파일 판독기 오류 : 정의되지 않은 설명

Question

시스템에서 로컬 파일을 가져 오는 중 일부 검색을 수행하고이를 수행하는 방법이 생겼습니다. 코드에서 구현하려고 시도했을 때 오류를 가지고 :

Uncaught TypeError: Cannot read property 'type' of undefined

document.getElementById('add-new-cat').addEventListener('click', handleFileSelect, false); 
 

 
function handleFileSelect(evt) { 
 
    var files = evt.target.files; 
 

 
    if(files.type.match('image.*')) { 
 
     var reader = new FileReader(); 
 
     reader.onload = (function(theFile) { 
 
      
 
     })(files); 
 

 
     var catIMG = reader.readAsBinaryString(files); 
 
     alert(catIMG);  
 
    } 
 
}

<input type="file" name="cat_path_orig" id="cat-path-orig"> 
 
<button class="btn btn-primary" id="add-new-cat">add</button>

I가 포함 된 파일로 나는 그것이

를 클릭되고있는 버튼의 값을 찾고 알고 있기 때문에,이 함수를 실행하는 방법을 모르는 것

Answer 1

click 이벤트 개체에는 files 속성이 없습니다.

document.getElementById('add-new-cat').addEventListener('click', handleFileSelect, false); 
 

 
function handleFileSelect(evt) { 
 
    var files = document.getElementById("cat-path-orig").files; // **** 
 

 
    console.log("files.length: " + files.length); 
 
    Array.prototype.forEach.call(files, function(file) { 
 
    console.log(file.name + ": " + file.type); 
 
    }); 
 
}

<input type="file" name="cat_path_orig" id="cat-path-orig"> 
 
<button class="btn btn-primary" id="add-new-cat">add</button>

다른 노트의 몇 :

1. 당신은 type보고 싶을거야 난 당신이 input type="file" 개체의 files 재산을 찾고 생각 속성을 사용하십시오 (위의 스 니펫 참조). 귀하의 예에서는 에 multiple 속성이 없으므로 하나만 존재하므로 위에 사용 된 루프 대신 files[0]을 사용할 수 있습니다.

2. readAsBinaryString의 사용도 잘못되었습니다. here's an answer with a correct example.