在html中讀取上傳的文本文件內容
[英]Reading uploaded text file contents in html
問題描述
我想在html中顯示上傳文件的內容，我可以上傳一個文本文件。 我的example.html：
<html xmlns="http://www.w3.org/1999/xhtml" >
<p>
Please specify a file, or a set of files:<br>
<input type="file" name="datafile" size="40">
</p>
<textarea id="2" name="y" style="width:400px;height:150px;"></textarea>
</html>
如何在如下所示的 textarea 中顯示任何上傳的文本文件的內容？
3 個解決方案
解決方案1
62 2017-05-24 14:55:00
我從谷歌來到這里，驚訝地看到沒有工作示例。
您可以使用具有良好跨瀏覽器支持的FileReader API讀取文件。
const reader = new FileReader()
reader.onload = event => console.log(event.target.result) // desired file content
reader.onerror = error => reject(error)
reader.readAsText(file) // you could also read images and other binaries
請參閱下面的完整工作示例。
document.getElementById('input-file') .addEventListener('change', getFile) function getFile(event) { const input = event.target if ('files' in input && input.files.length > 0) { placeFileContent( document.getElementById('content-target'), input.files[0]) } } function placeFileContent(target, file) { readFileContent(file).then(content => { target.value = content }).catch(error => console.log(error)) } function readFileContent(file) { const reader = new FileReader() return new Promise((resolve, reject) => { reader.onload = event => resolve(event.target.result) reader.onerror = error => reject(error) reader.readAsText(file) }) }
label { cursor: pointer; } textarea { width: 400px; height: 150px; }
<div> <label for="input-file">Specify a file:</label><br> <input type="file" id="input-file"> </div> <textarea id="content-target"></textarea>
解決方案2
23 2016-11-13 23:33:49
這是一種方法：
HTML
<tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad"></td>
<td><button onclick="loadFileAsText()">Load Selected File</button><td>
</tr>
JavaScript
function loadFileAsText(){
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent){
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
解決方案3
2 2019-01-10 16:43:14
document.getElementById('input-file') .addEventListener('change', getFile) function getFile(event) { const input = event.target if ('files' in input && input.files.length > 0) { placeFileContent( document.getElementById('content-target'), input.files[0]) } } function placeFileContent(target, file) { readFileContent(file).then(content => { target.value = content }).catch(error => console.log(error)) } function readFileContent(file) { const reader = new FileReader() return new Promise((resolve, reject) => { reader.onload = event => resolve(event.target.result) reader.onerror = error => reject(error) reader.readAsText(file) }) }
label { cursor: pointer; } textarea { width: 400px; height: 150px; }
<div> <label for="input-file">Specify a file:</label><br> <input type="file" id="input-file"> </div> <textarea id="content-target"></textarea>
解決方案4
0 2015-07-31 13:20:02
嘗試這個。
HTML
<p>
Please specify a file, or a set of files:<br>
<input type="file" id="myFile" multiple size="50" onchange="myFunction()">
</p>
<textarea id="demo" style="width:400px;height:150px;"></textarea>
JS
function myFunction(){
var x = document.getElementById("myFile");
var txt = "";
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
for (var i = 0; i < x.files.length; i++) {
txt += (i+1) + ". file";
var file = x.files[i];
if ('name' in file) {
txt += "name: " + file.name + "";
}
if ('size' in file) {
txt += "size: " + file.size + " bytes ";
}
}
}
}
else {
if (x.value == "") {
txt += "Select one or more files.";
} else {
txt += "The files property is not supported by your browser!";
txt += "The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.
}
}
document.getElementById("demo").innerHTML = txt;
}
讀取變量中上傳的文本文件內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.