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