使用Javascript將客戶端CSV讀入數組

我知道這看起來像一個重複的問題，但查找類似的主題使我仍然無能爲力。我試圖爲角色扮演遊戲構建一個在線角色表，其中角色狀態在客戶端計算機上保存爲txt或csv文件。使用Javascript將客戶端CSV讀入數組

例如，客戶可能有一個文件中保存標題爲Grandulf.txt其中有該字符的所有相關統計數據的內容一行像這樣：

Grandulf,1,5,staff

除了要長得多，其可能給我一個名字，角色的力量屬性，角色的智慧屬性，角色的武器等。

我希望客戶端（訪問我的小網站應用的用戶）能夠點擊按鈕上傳任何特定的字符文件他們已經創建了它，然後將數據放入一個數組中，我可以在整個數組中使用它web ap。

我想我可以使用<input type="file" onchange="functionCSVtoArray();">來啓動這個進程，但我不知道如何將它放到一個名爲charStats的數組中，我稍後可以使用它。例如，我將爲該名稱設置一個等於charStats[0]的文本字段值，因爲該名稱始終是第一個，因此將數字字段值設置爲charStats[1]，因爲我將始終將該值作爲數組中的第二個值，因此向前。

我已經（或將要）有一個html字符表，人們每次只能輸入值，但我正在尋找一種快速簡單的方法，讓人們無需「保存」和「加載」他們的角色學習SQL，PHP或其他數據庫首字母縮略詞，這超出了我的能力和技能。

這可能嗎？

編輯：我試過這個後，我問原來的問題，但我仍然不知道爲什麼它的作品。特別是，我不明白爲什麼函數中存在一個「e」作爲參數。

loadCharacter.onchange = function(e) { 
    var reader = new FileReader(); 
    reader.onload = function(event) { 
     charStats.value = event.target.result; 
     statsArray = event.target.result; 
     statsArray = statsArray.split(","); 
     saveButton.disabled = false; 
    } 
    name = e.target.files[0].name; 
    reader.readAsText(new Blob([e.target.files[0]], { 
     "type": "text/plain" 
    })); 
    /* Need to take the statsArray and put everything in the appropriate fields on the character sheet */ 
}

來源

2017-07-30 ericbright2002

雖然我理解你是從你的評論來了，你恰巧在這種情況下不正確。我不是在尋找某人爲我編碼，而是爲了瞭解它是如何工作的。我之前沒有發佈任何代碼，因爲之前的3個多小時都在查看我不明白的不同代碼版本。我不知道下面發佈的FileReader的想法，我仍然在學習它的工作原理。謝謝你看起來都一樣。 – ericbright2002

您可以使用FileReader，FileReader.prototype.readAsText()

var charStats = []; 
var reader = new FileReader; 
reader.onload = function() { 
    charStats.push(reader.result); 
    // do stuff with `charStats` array here 
    // as handler of `load` event of `FileReader` 
    // returns results asynchronously 
} 

functionCSVtoArray() { 
    var file = document.querySelector("input[type=file]").files[0]; 
    reader.readAsText(file); 
};

來源

2017-07-30 20:12:59 guest271314

感謝您的迴應！以上是我在此期間提出的，但看起來你有更好的解決方案。 – ericbright2002

@ ericbright2002沒有必要將'File'傳遞給'Blob'構造函數，'File'對象繼承自'Blob'對象 – guest271314

使用Javascript將客戶端CSV讀入數組

回答

相關問題