Javascript 如何在javascript中打开文件流？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6750594/
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
How do I open a file stream in javascript?
提问by tim
To give a concrete example of what I mean:
举一个具体的例子来说明我的意思：
Imagine I have an HTML page that looks like this
想象一下我有一个像这样的 HTML 页面
<div>
<div id="filecontents">
<!-- some html file contents -->
</div>
<input type="button" />
</div>
I would like to be able to click on the button, and it bring me up with a "Open or save file" dialog box.
我希望能够单击该按钮，它会弹出一个“打开或保存文件”对话框。
Is this even possible?
这甚至可能吗？
The objective of this is, is for me to be able to open up some html, text, or a CSV using the contents of a div as a data source for the file.
这样做的目的是让我能够使用 div 的内容作为文件的数据源打开一些 html、文本或 CSV。
采纳答案by Michael Mior
You can do this using the HTML5 FileSystem APIs. A couple tutorials here:
您可以使用 HTML5 文件系统 API 执行此操作。这里有几个教程：
Browser support is weak right now, but my guess is that it's the closest to what you want.
浏览器支持现在很弱，但我的猜测是它最接近你想要的。
回答by Phil
doesn't <input type="file" />do that exact thing?
不<input type="file" />这样做确切的事情吗？
回答by gilly3
I don't understand all these answers that say this is not possible without a plugin. I would say it absolutely ispossible with standard web technologies, but requires user interaction and server interaction. Of course you can't go reading or writing whatever you want on a user's computer from the web, but you can ask a user for a file (open), and give a user a file (save).
我不明白所有这些说没有插件就不可能的答案。我会说使用标准 Web 技术绝对是可能的，但需要用户交互和服务器交互。当然，您不能通过网络在用户的计算机上读取或写入您想要的任何内容，但是您可以向用户索要文件（打开），然后向用户提供文件（保存）。
To open a file with JavaScript, use a <input type="file" />. If you want, you can use JavaScript to display the open dialog by calling the click()method on the file input (the DOM method, not the jQuery method). In the onchangehandler, submit the form, read the uploaded file, and write the contents to your page.
要使用 JavaScript 打开文件，请使用<input type="file" />. 如果需要，您可以使用 JavaScript 通过调用click()文件输入上的方法（DOM 方法，而不是 jQuery 方法）来显示打开的对话框。在onchange处理程序中，提交表单，读取上传的文件，并将内容写入您的页面。
To save a file with JavaScript, send the contents of the file to the server, prepare the file, and stream it back to the client with a content-dispositionheader of attachment; filename="file.txt". This header causes the file to be downloaded and saved the user's pc rather than displayed in the browser.
要保存使用JavaScript文件，该文件的内容发送到服务器，准备文件，并用它流返回给客户端content-disposition的报头attachment; filename="file.txt"。这个标题导致文件被下载并保存在用户的电脑上，而不是显示在浏览器中。
Do that and you've officially written your first cloud computing app!
这样做，您就已经正式编写了您的第一个云计算应用程序！
回答by Gabe Moothart
<input type="file" />will allow you to upload a file to the server, but you have no direct access to that file, or to the local file system, from javascript - this is a security feature.
<input type="file" />将允许您将文件上传到服务器，但您无法从 javascript 直接访问该文件或本地文件系统 - 这是一项安全功能。
If you want to alter the page somehow based on the contents of the file, you will have to do a round-trip: upload the file to the server, then render a new page with the changes you want, and send it back to the client.
如果您想根据文件的内容以某种方式更改页面，则必须进行往返：将文件上传到服务器，然后使用您想要的更改呈现一个新页面，并将其发送回客户。
I have seen some file-stream-like code written for javascript (i.e., a flash implementation), but they must "load" files via an ajax request and then read the data as a javascript string.
我见过一些为 javascript 编写的类似文件流的代码（即 Flash 实现），但它们必须通过 ajax 请求“加载”文件，然后将数据作为 javascript 字符串读取。
回答by Steffen Müller
You cannot access the local filesystem from javascript because of security reasons. You can, however, receive files via drag and drop in modern browsersor use an java appletthat communicates with your javascript.
由于安全原因，您无法从 javascript 访问本地文件系统。但是，您可以通过在现代浏览器中拖放来接收文件，或者使用与您的 javascript 通信的Java 小程序。
EDIT:forgot about the new HTML5 file api linked by Michael Mior. Go with his answer, he's the man. If you need cross browser support, go with the java applet, its painful but works.
编辑：忘记了 Michael Mior 链接的新 HTML5 文件 api。按照他的回答，他就是那个人。如果您需要跨浏览器支持，请使用 java 小程序，它很痛苦但有效。
回答by Aaron Digulla
Not with pure JavaScript. You can't open a file dialog to save part of the HTML, for example. Even if you could, there is no way to open a local file with JavaScript for security reasons (otherwise, malicious web sites could steal all your data).
不是纯 JavaScript。例如，您无法打开文件对话框来保存部分 HTML。即使可以，出于安全原因，也无法使用 JavaScript 打开本地文件（否则，恶意网站可能会窃取您的所有数据）。
But every browser allows to write plugins (most of them are written in JavaScript), so you could try this approach.
但是每个浏览器都允许编写插件（其中大部分是用 JavaScript 编写的），因此您可以尝试这种方法。
回答by Gino Bautista
Use this script and put it in the button that the file browser should display.
使用此脚本并将其放在文件浏览器应显示的按钮中。
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
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); reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
