[英]Load .txt file into webpage
I am trying to have a user click on a "load file" button to choose a file for the webpage. 我试图让用户单击“加载文件”按钮以选择网页文件。 But I can't seem to get the actual file, just the name and when it was last modified. 但是我似乎无法获得实际的文件,只是名称和上次修改时间。 I need to run some JS code on that file, so I just need the actual text. 我需要在该文件上运行一些JS代码,所以我只需要实际的文本。 I don't need to put it in the web page, but I just thought that would be a good way to display it. 我不需要将其放在网页中,但是我只是认为那是显示它的好方法。 Here's my HTML: 这是我的HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onclick="update_loc(event)"">
<center><canvas width="400" height="400" id="myCanvas" style="border: 1px solid; border-color: #000000"></canvas></center>
<script src="./js.js"></script>
<input type="file" id="myFile">
<p id="output">YO</p>
</body>
</html>
And my JS: 而我的JS:
var reader;
var file;
setTimeout(test_file, 500);
function test_file() {
setTimeout(test_file, 500);
file = document.getElementById("myFile").files[0];
console.log(document.getElementById("myFile").files);
reader = new FileReader();
reader.onload = function (e) {
var textArea = document.getElementById("output");
textArea.value = e.target.result;
};
reader.readAsText(file);
}
I could not figure out how to copy and paste the chrome log, but I just got the file name and time in a "FileList" object. 我不知道如何复制和粘贴Chrome日志,但是我只是在“ FileList”对象中获得了文件名和时间。
Try this: 尝试这个:
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
For more info about how to read and manipulate those files (in this examples is for multiple files) check this url 有关如何读取和操作这些文件的更多信息(在本示例中为多个文件),请检查此URL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.