ボタンクリック時の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>

：エラーが発生しました

Answer 1

clickイベントオブジェクトにはfilesプロパティがありません。あなたはtypeを見てみたいと思うでしょう

1. ：

   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>

   他のノートのカップル：私はあなたがinput type="file"オブジェクト上filesプロパティを探しているのだと思います（上記のスニペットを参照）。あなたの例では、input type="file"にはmultipleという属性がないため、1つしか存在しないため、上記で使用したループではなくfiles[0]を使用できます。

2. readAsBinaryStringの使用も間違っています。 here's an answer with a correct example。