如何在JavaScript中打开文件流？

想象我有一个HTML页面，看起来像这样

<div> 
    <div id="filecontents"> 
     <!-- some html file contents --> 
    </div> 
    <input type="button" /> 
</div>

我希望能够按一下按钮，它给我带来了打开或保存文件“对话框。

这甚至可能吗？

这样做的目的是让我能够使用div的内容作为文件的数据源来打开一些html，文本或CSV。

来源

2011-07-19 tim

这是可能的，虽然在大多数浏览器中不能很好地支持。看到我的答案。 –

好吧，我不确定我是否已经足够清楚。这样做的目的是让我能够使用div的内容作为文件源打开一些html，文本或CSV。 – tim

它是否必须是客户端解决方案？你可以使用ASP.NET或类似的方法;内容必须是一个文件（我认为），所以你可以保存到Web服务器的temp，然后在用户请求时附加到响应中。假设HTML 5解决方案不适用于跨浏览器，或者不能满足您的需求。 – Nikki9696

您可以使用HTML5 FileSystem API执行此操作。一对夫妇在这里教程：

浏览器支持较弱的权利，但我的猜测是，它是最接近你想要什么。

来源

2011-07-19 16:32:29

我不太清楚这是如何让我能够将当前页面的内容放入“保存或打开为我的计算机上的新文件”框？我可能在这里很愚蠢（可能），但我看不到它。 – tim

这使您可以访问读取/写入文件。您可以通过JavaScript轻松访问当前页面的内容。 –

不是<input type="file" />做那件事吗？

来源

2011-07-19 16:26:42 Phil

+1是的，它确实比这些糟糕的Flash替代品要好得多 – 2011-07-19 16:32:11

它不允许javascript与文件内容交互，我认为这是OP想要的。 –

<input type="file" />将允许您将文件上传到服务器，但您无法直接访问该文件或从javascript访问本地文件系统 - 这是一项安全功能。

如果您想根据文件内容以某种方式更改页面，则必须执行往返操作：将文件上载到服务器，然后使用所需更改呈现新页面，然后发送它回到客户端。

我已经看到了一些为JavaScript编写的类文件流代码（即Flash实现），但它们必须通过ajax请求“加载”文件，然后将数据作为JavaScript字符串读取。

来源

2011-07-19 16:29:07

不适用纯JavaScript。例如，您无法打开文件对话框来保存部分HTML。即使可以，但出于安全原因，无法使用JavaScript打开本地文件（否则，恶意网站可能会窃取您的所有数据）。

但是每个浏览器都允许编写插件（其中大部分都是用JavaScript编写的），所以你可以试试这种方法。

来源

2011-07-19 16:30:31

当然你可以。var file = document.createElement（“input”）; file.type =“file”; document.forms [0] .appendChild（file）; file .onchange = function（）{document.forms [0] .submit（）; }; file.click（）;'。返回服务器响应中的文件。什么是阻止任何**恶意网站这样做？ – gilly3

我想你完全错过了这个问题和我的答案。 –

由于安全原因，您无法从JavaScript访问本地文件系统。但是，您可以接收文件via drag and drop in modern browsers或使用与您的javascript进行通信的java applet。

编辑：忘记了Michael Mior链接的新的HTML5文件api。与他的答案一起，他是男人。如果您需要跨浏览器支持，请使用java小应用程序，它很痛苦但很有用。

来源

2011-07-19 16:30:56

我不明白所有这些答案，说这是不可能的，没有插件。我认为它绝对是是可能与标准网络技术，但需要用户交互和服务器交互。当然，你无法从网络上读取或写入用户计算机上的任何内容，但可以向用户请求文件（打开），并为用户提供文件（保存）。

要用JavaScript打开文件，请使用<input type="file" />。如果需要，可以使用JavaScript通过在文件输入（DOM方法，而不是jQuery方法）上调用click()方法来显示打开的对话框。在onchange处理程序中，提交表单，读取上传的文件，并将内容写入您的页面。

要保存文件的JavaScript，发送文件的内容到服务器，准备文件，并与attachment; filename="file.txt"一个content-disposition头流呢返回给客户端。该标题使文件被下载并保存在用户的电脑而不是显示在浏览器中。

这样做，你已经正式编写你的第一个云计算应用程序！

来源

2011-07-19 16:49:34 gilly3

您的方法可行，但OP没有提及任何服务器/客户端应用程序。你不能单独使用JS和HTML <5（客户端）。 – Griddo

对不起老兄......但显然你不明白流传的整个概念！ – Daniel

@丹尼尔 - 这个问题是4岁。在2011年，文件api没有享受到好的浏览器支持，并且对于大多数web应用程序仍然需要支持ie6和ie7。 Node.js当时只是个小孩。今天是完全不同的游戏。 – gilly3

-3

使用此脚本并将其放入文件浏览器应显示的按钮中。

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);

来源

2017-01-18 19:31:24

En laúltimalinea“handleFileSelect，false）;'此处输入代码'” –

Elimina el'在此处输入代码' –

本网站是英文的，请用英文写。 – litelite

如何在JavaScript中打开文件流？

回答

相关问题