如何在將文件傳遞給Javascript函數之前通過HTML上傳文件？

所以我對web開發的世界很陌生，並且有一個我正在處理的項目，我希望用戶在返回另一個包含其文件編輯版本的文件之前上傳.txt文件。我發現的困難是，JS的文件處理能力似乎有限。如何在將文件傳遞給Javascript函數之前通過HTML上傳文件？

到目前爲止的想法是，我有用戶通過上傳自己的文件和一個.js函數調用，像這樣的HTML表單：

<form action="demo_form.asp"> 
    <input type="file" name="randomfile" id="rand"> 
    <br/> 
    <input type="submit" value="Submit"> 
</form> 

<script type="text/javascript" src="fileEditor.js"> 
</script>

我的問題是，我該如何利用文件內容與.js函數，如何從JavaScript返回一個新文件？它甚至有可能嗎？

謝謝

來源

2015-05-03 Leon Smith

是的，但HTML表單刷新頁面。如果您不希望頁面刷新，您將希望通過AJAX請求提交文本文件。 –

爲此，您需要使用Javascript文件讀取器。

首先，你會想從輸入元素的文件：

//Gets files from document element 
var files=document.getElementById('rand').files; 
//Selects first File and assigns it to file 
var file=files[0];

然後，你要創建的FileReader：

var reader = new FileReader();

然後，你要告訴FileReader在完成讀取文件後該怎麼做。這可以是任何你想要的功能，並且它在onload函數中，你想要做任何你想要的文件。

reader.onload=function(evt){ 
    //Prints contents of first file to the console 
    console.log(evt.target.result) 
}

最後你要告訴的FileReader實際讀取文件：

reader.readAsBinaryString(file)

如果您想了解更多信息，你可以找到的信息here。

編輯：也看看你的代碼頁面將默認刷新。我建議添加函數來讀取提交按鈕上onclick文件。

我在http://jsfiddle.net/fdxw2p5f/1/

來源

2015-05-03 04:51:18 Danman

我可以看到這種方法適用於我需要做的事情，儘管我想知道你的標籤的ID =「contents」實際上在提供的示例中做了什麼。 –

它會刪除您上傳的任何文件的內容。嘗試上傳文本文件。它不適用於任何類型的文件，但它應該適用於大多數.txt文件。 – Danman

你在哪裏從HTML中調用腳本？這不符合我的代碼的預期。 –

只是說明上述所有的例子：的JavaScript是一個客戶端腳本語言，即它只能在客戶端計算機上。如果您使用JS來處理文件，這意味着您不是上傳它，因爲上傳是指將文件發送到服務器。

來源

2015-05-03 05:44:43

如何在將文件傳遞給Javascript函數之前通過HTML上傳文件？

回答

相關問題