Tải lên tệp dưới dạng chuỗi biến JavaScript

Question

Có cách nào để khách hàng tải tệp lên dưới dạng HTML (ví dụ: .txt hoặc .csv định dạng) vào biến JavaScript dưới dạng chuỗi chỉ sử dụng JavaScript không? Nếu vậy, bạn có thể cung cấp một ví dụ đơn giản không? Tôi không muốn sử dụng bất kỳ PHP nào.

Cảm ơn trước!

Answer 1

Dưới đây là một ví dụ nhanh chóng và bẩn dựa trên một hình thức có tên là "MyForm" có chứa một đầu vào tập tin có tên là "myfile":

document.forms['myform'].elements['myfile'].onchange = function(evt) { 
    if(!window.FileReader) return; // Browser is not compatible 

    var reader = new FileReader(); 

    reader.onload = function(evt) { 
     if(evt.target.readyState != 2) return; 
     if(evt.target.error) { 
      alert('Error while reading file'); 
      return; 
     } 

     filecontent = evt.target.result; 

     document.forms['myform'].elements['text'].value = evt.target.result; 
    }; 

    reader.readAsText(evt.target.files[0]); 
}; 

Dưới đây là hình thức HTML liên quan:

<form id="myform"> 
    <p> 
    <input id="myfile" name="files[]" multiple="" type="file" /> 
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea> 
    </p> 
</form> 

và a jsfiddle để giới thiệu nó.

Answer 2

biến này trên yent's answer quản lý nhiều cập nhật và sử dụng jquery:

HTML:

<form id="myform"> 
    <p> 
    <input id="myfile" name="files[]" multiple="" type="file" /> 
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea> 
    </p> 
</form> 

kịch bản:

$("#myfile").on("change", function (changeEvent) { 
    for (var i = 0; i < changeEvent.target.files.length; ++i) { 
    (function (file) {    // Wrap current file in a closure. 
     var loader = new FileReader(); 
     loader.onload = function (loadEvent) { 
     if (loadEvent.target.readyState != 2) 
      return; 
     if (loadEvent.target.error) { 
      alert("Error while reading file " + file.name + ": " + loadEvent.target.error); 
      return; 
     } 
     console.log(loadEvent.target.result.length); // Your text is in loadEvent.target.result 
     }; 
     loader.readAsText(file); 
    })(changeEvent.target.files[i]); 
    } 
}); 

Worth chú ý:

• Bạn phải sử dụng một FileRead er cho mỗi tập tin (đồng thời) đọc. Nếu không, bạn sẽ thấy một ngoại lệ như The object is already busy reading.
• Lệnh gọi lại loadEvent sẽ được gọi theo thứ tự tùy ý, có thể phụ thuộc vào kích thước tải lên.
• Đóng cửa loadEvent sẽ thấy giá trị i kết thúc vòng lặp.
• Kết quả tệp tin không phải là mảng; họ không có forEach.

Bản trình diễn jsfiddle này duy trì thứ tự tải lên bằng cách đặt các div trong trình xử lý thay đổi.