HTML5 文件上传脚本未加载文件
HTML5 file upload script not loading file
HTML5 文件上传功能的新手,发现我无法上传简单的 xml 文件并能够将文件内容导入控制台。预期的行为是我 select 一个 xml 文件,然后看到在控制台中呈现的内容。但是,我从未进入 console.log 步骤 - 似乎 reader 从未加载过?非常感谢任何解决建议。
<input type="file"></input>
<script>
var upload = document.getElementsByTagName('input')[0];
upload.onchange = function (e) {
e.preventDefault();
var file = upload.files[0], reader = new FileReader();
reader.onload = function (event) {
console.log('evt',reader.readAsText(file));
};
return false;
};
</script>
因此您将 reader.onload
事件设置为一个函数,但您需要在此之外调用 reader.readAsText()
函数。
例如,将您的代码更改为:
reader.onload = function(event) {
console.log(event);
};
reader.readAsText(file);
它的作用是告诉 reader
当你调用 reader.readAsText(file)
时它应该 运行 你用 reader.onload
定义的函数。
你之前所做的永远不会加载文件,因为你只是在你的函数回调中告诉 reader 到 readAsText
,当它已经加载时你告诉它 运行已加载!
HTML5 文件上传功能的新手,发现我无法上传简单的 xml 文件并能够将文件内容导入控制台。预期的行为是我 select 一个 xml 文件,然后看到在控制台中呈现的内容。但是,我从未进入 console.log 步骤 - 似乎 reader 从未加载过?非常感谢任何解决建议。
<input type="file"></input>
<script>
var upload = document.getElementsByTagName('input')[0];
upload.onchange = function (e) {
e.preventDefault();
var file = upload.files[0], reader = new FileReader();
reader.onload = function (event) {
console.log('evt',reader.readAsText(file));
};
return false;
};
</script>
因此您将 reader.onload
事件设置为一个函数,但您需要在此之外调用 reader.readAsText()
函数。
例如,将您的代码更改为:
reader.onload = function(event) {
console.log(event);
};
reader.readAsText(file);
它的作用是告诉 reader
当你调用 reader.readAsText(file)
时它应该 运行 你用 reader.onload
定义的函数。
你之前所做的永远不会加载文件,因为你只是在你的函数回调中告诉 reader 到 readAsText
,当它已经加载时你告诉它 运行已加载!