使用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>

这样它包含一个（隐藏的）文件输入标签，用于触发文件选择对话框（工作正常）：

<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];