时间戳

首页 > 解决方案 > 如何使用 *.txt 文件作为输入值？

javascript - 如何使用 *.txt 文件作为输入值？

问题描述

我有两个按钮...单击时，它们会在输入字段中显示一些文本。我使用一些简单的 javascript 来选择要显示的文本，在按钮下定义的文本id="blabla1"或按钮下的文本id="blabla2"。是否可以显示在外部.txt文件中定义的文本？

在输入按钮下定义为值的文本可以正常工作：

<input type="hidden" id="SupSite1Title" value="Subsite1 Title!"><br>

但我想要txt文件中的文本。

<body>  

<div id="leftnav">
<ul>
<li><input type="text" id="TextField1"><br><br></li>
</ul>   
</div>

<div id="rightnav">
<ul>
<li><button id="blabla1" onclick="myFunction1()">Side1</button></li>
<li><button id="blabla2" onclick="myFunction2()">Side2</button></li>
</ul>   
</div>


<input type="hidden" id="SupSite1Title" value="Subsite1 Title!"><br>
<input type="hidden" id="SupSite2Title" value="Subsite2 Title!"><br>


<script>
function myFunction1() {document.getElementById("TextField1").value =document.getElementById("SupSite1Title").value;
}
</script>
<script>
function myFunction2() {document.getElementById("TextField1").value =document.getElementById("SupSite2Title").value;
}
</script>

标签： javascripthtml

解决方案

如果你想显示.txt文件的文本内容......你可以使用一个名为FileReader API 的 API（你需要检查你的浏览器是否支持）

这是你如何做到的：

更新 ： 

var file1 = document.getElementById('file1');
var file2 = document.getElementById('file2');

document.getElementById('bOne').addEventListener("click", function(){getFile(file1)})
document.getElementById('bTwo').addEventListener("click", function(){getFile(file2)})


function getFile(target) {
	const input = target;
  if ('files' in input && input.files.length > 0) {
	  placeFileContent(
      document.getElementById('display'),
      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 {
display : block;
margin-top : 40px;
margin-bottom : 20px;
}
<label for="file1">Upload file 1 : </label>
<input type="file" accept=".txt" id="file1"  name="file1">

<label for="file2">Upload file 2 : </label>
<input type="file" accept=".txt" id="file2"  name="file2">


<button id="bOne">Display file1</button>
<button id="bTwo">Display file2</button>

<label for="file2">Selected file :  </label>
<input type="text" id="display" for="display">

方法 N°2（从服务器获取数据）：

function fetchData(buttonNumber) {
  var btn1 = document.getElementById('b1')
  var btn2 = document.getElementById('b2')
  var display = document.getElementById('display')
  //fetching data
  if (buttonNumber == 1) {
    //replace 'file1.txt' with your file URL
    fetch('file1.txt').then(x => {
      x.text().then(function(text) {
        display.value = text
      });
    })
  } else {
    //replace 'file2.txt' with your file URL
    fetch('file2.txt').then(x => {
       x.text().then(function(text) {
        display.value = text
      });
    })
  }
}
#b1,
#b2 {
  display: block;
  margin: 40px;
}
<button id="b1" onclick="fetchData(1)">Get file 1 and show it</button>
<button id="b2" onclick="fetchData(2)">Get file 2 and show it</button>

<label for="file2">Selected file :  </label>
<input type="text" id="display" for="display">

推荐阅读