我想使用javascript filereader()从另一个页面加载另一个页面，如何根据div指定函数的参数？
html 代码:
<!DOCTYPE HTML>
<html>
<body>
<div class='try1' onclick="openFile('test1.txt')">Show Test1</div>
<div class='try2' onclick="openFile('test2.txt')">Show Test2</div>
<div id='show_content'></div>
<script>
var openFile = function(event) {
var input = event;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
document.getElementById("show_content").innerHTML = (reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
</script>
</body>
</html>
我想要它，以便当:
1) 我点击 div class='try1'，它会将一个名为 'test1.txt' 的文件加载到 div id='show_content' 中，
2) 当我点击 div class='try2' 时，它会将一个名为 'test2.txt' 的文件加载到 div id='show_content' 中。
我该如何实现这一目标？我知道我可以使用 jQuery .load() 函数，但事实证明 jQuery .load() 函数需要服务器并使用 xmlhttprequest 来加载，而我需要在本地执行此操作。如果有更好的解决方案来实现这一点，我们将非常感谢所有答案。谢谢
最佳答案
您可以在页面中放置一个隐藏的input，然后显式调用openFile；
<div id='try1' onclick="openFile('test.txt')">show try 1</div>
<div id="show_content"></div>
<input type="file" id="fileElem" accept="text/plain" style="display:none" onchange="openFile(event)">
您只需向您的 div 添加一个事件监听器:
var try1 = document.getElementById("try1"),
fileElem = document.getElementById("fileElem");
try1.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
最后:
var openFile = function (event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function () {
var text = reader.result;
var content = document.getElementById("show_content");
content.innerHTML = reader.result.substring(0, 200);
};
reader.readAsText(input.files[0]);
};
关于JavaScript 文件读取器()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30389757/