javascript file reader on button click error: undefined refference

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. Я думаю, что вы ищете files собственности на input type="file" объекта:

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 свойство для каждого отдельного файла (см. фрагмент выше). В вашем примере будет только один (потому что нет атрибута multiple на input type="file"), поэтому вы можете просто использовать files[0], а не цикл, который я использовал выше.

2. Неправильное использование вами readAsBinaryString; here's an answer with a correct example.