來自JavaScript文件讀取器的訪問元素

我正嘗試用JavaScript和文件API讀取文件。來自JavaScript文件讀取器的訪問元素

我有以下代碼

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    var fileBlobs = []; 
    var reader = new FileReader(); 
    for (var i = 0, f; f = files[i]; i++) { 
        fileBlobs.push(reader.readAsBinaryString(f)); 
        console.log(reader) 
     } 
     }

它記錄了我這個對象

FileReader {onloadend: null, onerror: null, onabort: null, onload: null, onprogress: null…} 
error: null 
onabort: null 
onerror: null 
onload: null 
onloadend: null 
onloadstart: null 
onprogress: null 
readyState: 2 
result: "lat, lng, popup↵13.47262306516617336, 52.47896324136591062, 55↵13.40861762468653673, 52.54336741663770027, 44↵13.29255442595013115, 52.51117712705399754, 33↵13.38642907198692988, 52.44880630287082113, 22" 
__proto__: FileReader

我怎麼只能訪問result一部分？

來源

2014-02-25 ustroetz

的console.log（閱讀器。結果） –

這不會返回任何東西 – ustroetz

您需要處理FileReader的load事件。在處理程序，訪問reader.result或this.result：

reader.onload = function() { 
    var contents = this.result; 
};

讀取文件是一個異步操作。因此，您需要爲每個文件創建一個單獨的FileReader。如果您想重複使用相同的FileReader，則不能使用for循環。相反，您必須等待讀取下一個文件，直到處理完當前文件。

來源

2014-02-25 16:21:17 gilly3

NOT測試，但我認爲它應該工作:)

var file = document.getElementById('element-id').files; 
var fr = new FileReader(); 
var storeBlobs = []; 
fr.onload = function(e) { 
    storeBlobs.push(e.target.result); 
}; 
for(var i = 0, l = file.length; i < l; i++) { 
    var content = fr.readAsText(file[i]); 
}

文件返回的對象可然後被操縱槽的FileReader物體的onload方法的陣列。如果用戶加載多個文件，我們要處理所有這些文件，我們將使用for循環執行此操作。我強調這個代碼沒有經過測試，但它應該可以工作。

我們可以，如果我們假設用戶將加載一個文件只能使文件對象這樣的表現與替換的第一行代碼與此：

var file = document.getElementById('element-id').files[0];

來源

2015-12-24 03:07:45 Gaja

請嘗試對它的原因進行評論或解釋 – meneldal

@meneldal這段代碼很簡單且很明顯，但我想你說得對，有些人需要更多信息，那就是好。謝謝，我感謝你提到這一點。 – Gaja

閱讀您的答案的人可能不熟練使用任何語言，因此儘可能多地解釋它被認爲是很好的做法。 – meneldal

來自JavaScript文件讀取器的訪問元素

回答

相關問題