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 属性。我认为您正在寻找 input type="file" 对象上的 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>

一些其他注意事项：

您需要查看每个文件的 type 属性（请参阅上面的代码片段）。在您的示例中，只有一个（因为 input type="file" 上没有 multiple 属性），因此您可以只使用 files[0] 而不是我在上面使用的循环。
您对readAsBinaryString的使用也不正确； here's an answer with a correct example.

javascript file reader on button click error: undefined refference

javascript file reader on button click error: undefined refference

javascript

filestream