我希望用戶將他們的計算機上的文件上載到瀏覽器中，然後將其內容保存爲字符串以便可以通過程序的其餘部分。我正在查看CSV文件，但理論上，我希望這可以適用於任何包含某種文本的文件。這應該是所有客戶端。我不直接從上傳的文件向服務器發送任何內容。HTML 5 File API在瀏覽器中上傳文件並將內容保存爲字符串
<html>
<body>
<input type="file" id="files" />
<br />
<input type="button" onclick="click()">
<script>
var file = this.target;
var reader = new FileReader();
reader.onload = function(event){
window.text = event.target.result;
};
reader.readAsText(file);
console.log(window.text);
function click(){
alert(window.text);
};
</script>
</body>
</html>
但即使在我選擇了一個文件後，控制檯始終記錄未定義。 onclick功能似乎也不工作（可能是因爲內容未定義？）
如何上傳帶文本的文件並將其內容保存爲字符串作爲變量？
編輯1： 有人留下了一個有用的答案，但我想刪除它。我能夠更好地瞭解發佈的一些信息here，這解釋瞭如何獲取文件的內容，但我仍然有一些困難。該鏈接解釋瞭如何上傳文件，然後顯示包含文件信息的警報以及文件內容的子字符串。 但是，我希望能夠在保存在變量中時看到整個文件的內容。我改變了一部分代碼來創建一個包含我認爲是文件內容的全局變量，但是無論何時我將其登錄到控制檯，即使上傳文件後，它仍會記錄undefined。 onclick警報功能也繼續不顯示。
<input type="button" onclick="click()" />
<input type="file" id="fileinput" />
<script>
function readSingleFile(event) {
//Retrieve the first (and only!) File from the FileList object
var file = event.target.files[0];
if (file){
var reader = new FileReader();
reader.onload = function(e) {
window.contents = e.target.result;
alert("Got the file.n"
+"name: " + file.name +
+ "starts with: " + window.contents.substr(1, window.contents.indexOf("n"))
);
}
reader.readAsText(file);
}
else {
alert("Failed to load file");
}
};
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
document.write(window.contents);
function click(){
alert(window.contents);
};
</script>
如何打印/記錄/提醒/等包含文本的變量，所以我可以看到如何訪問它以後？儘管使用全局變量，但當我嘗試在字符串上運行其他函數時，它說它不能這樣做，因爲它是undefined。
編輯2： 隨着Ray Nicholus的意見，我決定創建複製從在onload函數的文件內容到一個全局變量，所以它可以在函數外使用的功能。將我的程序代碼的其餘部分添加到onload函數中幾乎是不可能的，並且需要重新格式化。
function makeGlobalText(s){
window.text = s;
};
function readSingleFile(event) {
var file = event.target.files[0];
if (file){
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
alert("Got the file.n"
+"name: " + file.name +
+ "starts with: " + contents.substr(1,contents.indexOf("n"))
);
makeGlobalText(contents);
};
reader.readAsText(file);
}
else {
alert("Failed to load file");
}
};
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
再次，嘗試登錄控制檯時，打印到屏幕上，或警報，window.text調用makeGlobalText(contents)在onload函數內部之後，一切依舊不確定或不響應。這一次可能有一些我看不到的小問題。
如果我在onload中創建一個函數，並將其複製到一個全局變量中，爲什麼我無法訪問該變量？
您可以在'onload'處理程序中訪問文件的內容。對該函數內的文件內容做任何你想做的事情。此外，請將您的電話移至'document.write'。 'window.contents'將是未定義的或者執行時的前一個文件的內容。 –
我需要解析這些內容，並通過一堆正則表達式來運行它，這些正則表達式將創建不同的數組，這些數組將全部以AngularJS以某種方式顯示。我應該在onload處理程序中完成這些操作？根本沒有辦法把這個字符串拉出來？ – user2494584
在'window'對象上存在內容屬性之前，您當然無法解析內容。 'onload'正在更新這個屬性的值。如果你不想要一個大的'onload'函數，創建你在'onload'中調用的其他函數。 –