按钮单击错误上的 javascript 文件阅读器：未定义的引用

Question

我正在尝试从系统中获取本地文件，我进行了一些搜索并找到了一种方法，当我尝试在我的代码中实现它时，我收到了错误：

未捕获的类型错误：无法读取未定义的属性“类型”

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>

其他几点说明：

1. 您需要查看每个单独文件的 type 属性（请参阅上面的 sn-p）。在您的示例中，将只有一个（因为 input type="file" 上没有 multiple 属性），因此您可以只使用 files[0] 而不是我上面使用的循环。

2. 你对readAsBinaryString的使用也不正确； here's an answer with a correct example.