Question

我有一个脚本，可以加载要读入应用程序的.DAT文件。当我第一次运行脚本时，文件加载并且我能够使用该文件。但是，如果我决定要替换初始文件（假设我犯了一个错误并加载了错误的文件），我就不能，脚本出错了。任何人都可以解释原因吗？

我明白了：

未捕获的TypeError：无法读取属性＆＃39;文件＆＃39;未定义的

HTML：

<span>DAT File: </span><input type="file" id="selectedFile">

JS：

var selectedFile = $("#selectedFile");
$("#load").on("click", function(){
    selectedFile = selectedFile[0].files[0];
    if(selectedFile){
        readFile(selectedFile);
    }
})
function readFile(file){
    var reader = new FileReader();
    console.log(file);
    var holder;
    var holderArray = [];
    var fileArray = [];
    reader.readAsText(file, "UTF-8");
        reader.onload = function(){
        file = reader.result;
        file = file.split(/\s+/g);
        formatFile(holderArray, 3, holder, file, fileArray);
        for(var i = 0; i < 2; i++){
            formatFile(holderArray, 1, holder, file, fileArray);
        }
        for(var i = 0; i < 2; i++){
            formatFile(holderArray, 2, holder, file, fileArray);
        }
        var meh = file.length / fileArray.length;
        for(var i = 0; i < meh; i++){
            formatFile(holderArray, 5, holder, file, fileArray);
        }
        fileArray.pop();
        processFilleInfo(fileArray);
    }
}

Answer 1

您应该在事件中定义selectedFile变量：

$("#load").on("click", function(){
    var selectedFile = $("#selectedFile");

    selectedFile = selectedFile[0].files[0];

    if(selectedFile){
        readFile(selectedFile);
    }
})

希望这有帮助。

Answer 2

移动var selectedFile = $（“＃selectedFile”）;到#load的单击处理程序内部。

正在发生的是 - 第1行，您将selectedFile设置为jQuery元素。第一次调用load.click方法时就是这样。现在，您将变量selectedFile重置为DOM元素“selectedFile”的第一个文件。下次单击selectedFile时就是这个。这是文件。不再是DOM元素！

如果不为不同的事物重用变量名，可能会更容易。这并不容易理解发生了什么（ - ：

这可能是一种更好的方法：

https://jsfiddle.net/justinwyllie/znLfhyf1/4/

$("#load").on("click", function(){
    selectedFile = $("#selectedFile")[0].files[0];
    if(selectedFile){
        readFile(selectedFile);
    }
})

这是一个很好的例子，说明JavaScript如何在onClick处理程序中保留范围。

加载初始文件后无法加载其他文件

2 个答案: