gpt4 book ai didi

javascript - 在html中读取上传的文本文件内容

转载 作者:技术小花猫 更新时间:2023-10-29 12:06:06 24 4
gpt4 key购买 nike

我想在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>

如何在下面显示的文本区域中显示任何上传的文本文件的内容? ScreenShot

最佳答案

我从谷歌来到这里,很惊讶没有看到有效的例子。

您可以使用 FileReader API 读取文件搭配不错cross-browser support .

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>

关于javascript - 在html中读取上传的文本文件内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31746837/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com