如何在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中打開文件流？

回答

相關問題