Menu
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? 
271
Make sure you check the source of the document once it's loaded in the browser (all browsers let you do this, right-click "view page source" or similar). If you see the contents of version. txt anywhere in there, you're on the right track, you just need to move it into the body tag so that it will be rendered.
To read a file, use FileReader , which enables you to read the content of a File object into memory. You can instruct FileReader to read a file as an array buffer, a data URL, or text. // Check if the file is an image.
Use the fs. readFileSync() method to read a text file into an array in JavaScript, e.g. const contents = readFileSync(filename, 'utf-8'). split('\n') . The method will return the contents of the file, which we can split on each newline character to get an array of strings.
I've came here from google and was surprised to see no working example.
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>Here's one way:
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"); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
