javascript - 奇怪的 JQuery location.reload() 行为？

Question

这是我的 javascript 代码，当用户单击 HTML 中的浏览 按钮时将被调用:

function run(){
console.log('run();')
document.getElementById('csv_file_upload').addEventListener('change', read_csv, false);

$('#csv_file_upload').click(function() {
    location.reload();
    console.log('reload();');
});}

这是我的 HTML 代码的一部分:

<div id="dvImportSegments" class="fileupload ">
    <fieldset>
        <legend>Upload your CSV File</legend>
            <input type="file" name="File Upload" id="csv_file_upload" accept=".csv" onclick="run();" />
   </fieldset>
</div>

<div id="data-display"></div>

下面是说明我的问题的截图:

1)这是我的页面的样子:

2) 当我点击Browse 按钮时，它将运行javascript 中的run() 函数。

3) 在我选择了我的数据之后，其他部分的功能将完成他们的工作。到目前为止，一切都很好。

4) 然后，当我想浏览另一个 .csv 文件时，我单击 Browse 按钮，一旦我单击它，JQuery reload() 将被激活并且 div 中以前的东西当我选择另一个 csv 文件时，将自动清除。当我选择另一个 csv 文件时出现问题。该页面不会在 javascript 中运行 run()。

5) 重新加载的页面没有任何结果。为什么会这样？有什么解释吗？有人可以帮我解决这个问题吗？

Answer 1

您在浏览新文件时似乎试图清除之前选择的文件。

替换这个:

location.reload();

通过这个:

$(this).val("");

Here is the JSFiddle demo

清除控件的值就足够了，而不是重新加载页面(这会导致最初附加的事件丢失，即使您的浏览窗口已打开)