js 如何使用选择上传的本地文件?

2016-05-20 00:45:39 +08:00
 strggle

简单来说,我要从本地选择一个模型文件并且在页面加载它类似这样: load(fileUrl) 但是上传文件后,在 js 中获取到的是一个本地虚拟地址,传入这个地址的话是会被浏览器拒绝访问的,我搜了一整天,没有找到能用的解决方法。 有一个方法是将文件上传到服务器后返回其地址,但是模型文件大的话大小可能有几 M 到几十 M ,这样子的话效率比较低,想问问有没有什么方法可以实现本地调用文件?

4037 次点击
所在节点    JavaScript
8 条回复
Slienc7
2016-05-20 00:56:14 +08:00
rogerchen
2016-05-20 07:57:50 +08:00
<input id="fxxk" type=file></input>
监听一下 fxxk 的 change 事件,拿一下 ev.target.files, 送给楼上的 FileReader 就好
strggle
2016-05-20 10:13:19 +08:00
感谢楼上两位! 看了下 api ,尝试用了用 FileReader.result ,终于成功了!然后发现问题所在:
读取数据有三个方法,只有第一个才能生效,文档里说: the result attribute contains a data: URL representing the file's data. 大意就是返回一个 URL 代表这个文件

readAsDataURL(resultFile);
readAsBinaryString(resultFile);
readAsText(resultFile,'UTF-8');

正常代码:
var reader = new FileReader();

reader.readAsDataURL(resultFile);

reader.onload = function (e) {
load(reader.result);
}
YuJianrong
2016-05-20 10:50:59 +08:00
不知道为什么不行。
不过首先你为什么先读了再挂 onload 事件?不是应该反过来吗?
strggle
2016-05-20 12:03:12 +08:00
@YuJianrong 咦,你这么一说我才发现。这段代码是从网上教程找来修改后的 TAT ,不过实际运行还是可以跑,可能是文件比较大,还没加载完时就绑定好事件了。。。可能加载的文件小的话就会出 bug 了。。。 多谢提醒
dsphper
2016-05-20 14:00:23 +08:00
miniwade514
2016-05-20 15:42:23 +08:00
@YuJianrong 读文件是异步的,代码执行到 .onload 那里的时候,文件才刚开始读。.onload 只是监听 load 事件,要等文件读完了才会触发这个事件。
fhefh
2016-06-30 16:28:03 +08:00
mark~~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/279899

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX