使用html5文件读取器API读取本地文件_second_ time

Question

我目前正在使用一些小型帮助工具。该方法是通常从本地文件系统加载的页内Web应用程序。这一切都有效。在该应用程序内部，我需要能够加载和处理本地文件（存储和重新加载配置文件）。这工作到目前为止，但我有一个问题，我想请求帮助：

我使用围绕html5文件阅读器API的filereader.js包装。事情到目前为止，我可以选择，阅读和处理页面中的文件。大！我甚至可以一个接一个地处理多个文件。但是有一个问题，我不知道如何开始调试它：我可以不是第二次读取特定文件。我可以选择它，当然，但它不会被读取，因此不会被处理。它看起来没有任何事件由文件读取器API生成。这可能连接到缓存或之前使用的文件没有正确终止，我不知道。

下面是相关代码：

我的FileReader JS功能：

function FileReader(selector, options) { 
    var options = $.extend({ 
     clicked: function(){}, 
     payload: function(){}, 
     selected: function(){} 
    }, options||{}); 
    var widget = convert(selector); 
    var selector = widget.find('input:file'); 

    function clicked(event) { 
     event.stopPropagation(); 
     // highlight button as user feedback 
     highlight(); 
     // raise the file selection dialog 
     selector.click(); 
     // signal action to element 
     options.clicked(); 
    } 

    function convert(selector) { 
     var widget = $(selector); 
     // create new content for widget 
     var hotspot = $('<a class="hotspot">' + widget.html() + '</a>').bind('click', clicked); 
     var selector = $('<input type="file" style="display:none;" />'); 
     // replace initial content of widget 
     widget.empty().append($('<form />').append(selector).append(hotspot)); 
     widget.find('input:file').fileReaderJS({ accept: false, 
                           readAsDefault: 'BinaryString', 
                           on: { load: selected } }); 
     return widget; 
    } 

    function highlight() { 
     // flash button by changing the background color for 100 msecs 
     widget.css('background-color', 'whitesmoke'); 
     setTimeout(function(){ widget.css('background-color', 'transparent'); }, 100); 
    } 

    function selected(event, file) { 
     // process payload 
     options.payload(event.target.result); 
     // signal event to controlling element 
     options.selected(); 
    } 

    return {} 
} // FileReader 

这种方法被称为与'#wProfileImport'作为参数selector，其实际工作和转换之下

标记的价值

<span id="wProfileImport" class="control button"> 
    <img src="assets/img/profile-import.png"> 
</span> 

这样它包含一个（隐藏）文件输入标签，用于激发文件选择对话框KS精）：

<span id="wProfileImport" class="control button"> 
    <form> 
     <input type="file" style="display:none"> 
    </form> 
    <a class="hotspot"> 
     <img src="assets/img/profile-import.png"> 
    </a> 
</span> 

现在单击该文件选择器被触发的图像时，我可以选择一个本地文件，其内容被移交给options.payload回调。正如所说的那样一切顺利，并且一个接一个地处理多个文件。唯一的问题仍然是：能够在中再次读取相同的文件。没有事件被解雇，没有内容阅读，什么都没有。

所以我的问题是：如果用户选择了第二次输入文件，我需要怎么做？

Answer 1

这与onchange事件在JavaScript中的工作方式有关。

如果您有文本输入并且键入了一个单词，比如说"bird"。您将该区域放开，这会导致触发事件onchange。如果你再回到现场并更换单词，那么如果不专注改回"bird"和，那么不会集中onchange事件将会发生而不是因为值没有改变。

然而，其他事件如onkeydown和onfocus会触发。

看看你是否可以找到另一个可以使用的事件。也许onclick或onfocus。我担心这些火太早。

解决方法：一旦您读取文件并渲染一个新的一个位置，就可销毁input。这样，如果用户选择相同的文件，它将再次算作onchange。

另一种可能性是不使用onchange事件，但按下提交按钮后执行该过程。你可以得到一个文件的参考：

var file = document.getElementById("#the_file_input").files[0];