Question

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

未捕获的TypeError：无法读取未定义的属性“type”

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"属性：

＆＃13;

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);
  });
}

＆＃13;

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

＆＃13;

其他几点说明：

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

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

1 个答案: