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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3671 days ago, the information mentioned may be changed or developed.

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

文件

上传

地址

模型

8 replies • 2016-06-30 16:28:03 +08:00

Slienc7

May 20, 2016 via Android

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

rogerchen

May 20, 2016

<input id="fxxk" type=file></input>
监听一下 fxxk 的 change 事件,拿一下 ev.target.files, 送给楼上的 FileReader 就好

strggle

May 20, 2016

感谢楼上两位！看了下 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);
}