javascript 从 chrome 打开本地文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25246281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening local files from chrome
提问by Amit Ben Ami
Is it possible to open a local file on the filesystem/network drive (c:\abc.xlsxor p:\abc.xlsx)?
是否可以在文件系统/网络驱动器（c:\abc.xlsx或p:\abc.xlsx）上打开本地文件？
If so, is it possible to do it through a custom extension that I create for Google Chrome?
如果是这样，是否可以通过我为 Google Chrome 创建的自定义扩展程序来实现？
回答by Mike Cluck
回答by jsanc623
HTML5 finally provides a standard way to interact with local files, via the File API specification.
HTML5 最终通过文件 API 规范提供了一种与本地文件交互的标准方式。
The spec provides several interfaces for accessing files from a 'local' filesystem:
该规范提供了几个用于从“本地”文件系统访问文件的接口：
- File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle.
- FileList - an array-like sequence of File objects. (Think or dragging a directory of files from the desktop).
- Blob - Allows for slicing a file into byte ranges.
- 文件 - 一个单独的文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。
- FileList - 类似数组的 File 对象序列。（思考或从桌面拖动文件目录）。
- Blob - 允许将文件切成字节范围。
When used in conjunction with the above data structures, the FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. Thus, it is possible to monitor the progress of a read, catch errors, and determine when a load is complete. In many ways the APIs resemble XMLHttpRequest's event model.
当与上述数据结构结合使用时，FileReader 接口可用于通过熟悉的 JavaScript 事件处理异步读取文件。因此，可以监视读取进度、捕获错误并确定加载何时完成。API 在许多方面类似于 XMLHttpRequest 的事件模型。
The first thing to do is check that your browser fully supports the File API:
首先要做的是检查您的浏览器是否完全支持 File API：
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
Next, handle file selection:
接下来，处理文件选择：
<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);
To read file, extend handleFileSelect as such:
要读取文件，请像这样扩展 handleFileSelect：
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
Lastly, here is the file spec: http://www.w3.org/TR/file-upload/
最后，这里是文件规范：http: //www.w3.org/TR/file-upload/
