javascript - Reading uploaded text file contents in html

Question

Welcome To Ask or Share your Answers For Others

javascript - Reading uploaded text file contents in html

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Reading uploaded text file contents in html

I want to show contents of uploaded file in html, I can just upload a text file. My 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>

How can I show contents of any uploaded text file in textarea shown below?

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:26:29+0000

I've came here from google and was surprised to see no working example.

You can read files with FileReader API with good 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

See fully working example below.

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>

Categories

javascript - Reading uploaded text file contents in html

javascript - Reading uploaded text file contents in html

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

You can read files with FileReader API with good cross-browser support.

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags