如何從打開文件對話框中讀取文本並使用javascript（jquery）在textarea中加載內容？

Question

我想制作一個“打開文件”按鈕，將txt文件內容導入textarea。

如何在不將文件內容上傳到服務器的情況下讀取文件內容？

我想使用javascript（使用jquery lib），我想在不刷新頁面的情況下執行此操作。

Answer 1

這可以通過HTML5 File API實現 。

使用它從輸入元素獲取文件，然后使用jQuery將文本追加到您想要的任何元素。

Answer 2

我使用HTML 5 File API。 在本地它完美地工作。

給Trusktr +1。

參考： http ：//www.html5rocks.com/en/tutorials/file/dndfiles/（切片文件。）

Answer 3

使用vanilla javascript是不可能的，你需要flash或其他方法來做你想要的。

原因是安全性：阻止你閱讀allMyPasswords.txt :)

Answer 4

你不能。

瀏覽器打開文件打開對話框，以響應帶有FILE類型的INPUT標記的FORM提交。 該文件必須首先上傳到服務器。

Answer 5

我想我會做一個簡單的ajax表單上傳文件，然后在刪除文件並打印之前用php獲取內容，想不出另一個解決方案。

Answer 6

正如你所說，除了將往返服務器的文本帶回服務器之外別無他法。 然而，為了緩解疼痛，您可以完全自動化：

1. 將文件上傳輸入包含在自己的表單標記中，並為表單提供一個id
2. 在頁面中添加一個不可見的iframe，並為其命名，並對id使用相同的iframe
3. 使用iframes名稱作為保存文件上載的表單的target屬性
4. 將函數綁定到文件上傳的更改事件以觸發表單的提交。 這樣，只要您選擇文件並關閉文件打開對話框，就會開始上傳過程

5. 當您將目標設置為iframe時，來自服務器的響應將到達那里，因此您的php腳本會發回類似於以下內容：

   echo "<script>window.top.window.file_ready('$file');</script>";

6. 編寫一個名為file_ready的js函數，它將文件名作為參數，並通過對服務器進行ajax調用來更新textarea的值。

歸屬到期。 我從AJAX文件上傳教程中學到了這個技巧。

Answer 7

用vanila JS和HTML5做到這一點非常簡單。 首先將textarea和輸入的HTML標記放在某處：

 <textarea id="textareaid" rows="4" cols="50"></textarea>
 <input type="file" id="files" name="files[]" /><output id="list"></output>

然后將以下代碼添加到您的JavaScript代碼中，如果您的textarea具有不同的id，則需要將textarea的id替換為“textareaid”。 之后，只需調用uploadAndLoad（）; 在你的代碼中。

function handleFileSelecting(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++) {

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {

                var content = e.target.result;
                if (content) {
                    // Inserting content into textarea, change id if you need
                    var textarea = document.getElementById('textareaid');
                    textarea.innerHTML = content;

                }
            };
        })(f);

        reader.readAsText(f);
    }
}

function uploadAndLoad() {
    var filesElem = document.getElementById('files');
    filesElem.addEventListener('change', handleFileSelecting, false);
    filesElem.click();
}