Có thể tải lên tệp bằng cách sử dụng
Và sau đó phân tích nó vào mảng JavaScript mà không lưu tệp ở phía máy chủ? Bạn có thể tư vấn bất kỳ plugin nào để thực hiện nó với loại tệp CSV [hoặc bất kỳ] nào khác].
Có nên làm những việc như vậy không sử dụng back-end?
Thanks.
Đã hỏi ngày 9 tháng 10 năm 2013 lúc 19:28Oct 9, 2013 at 19:28
Fyodor Khruschovfyodor KhruschovFyodor Khruschov
1.6376 huy hiệu vàng23 Huy hiệu bạc40 Huy hiệu đồng6 gold badges23 silver badges40 bronze badges
3
Mã JS để tải lên CSV và phân tích phía máy khách và sau đó vẽ chúng vào bảng điều khiển
function uploadDealcsv [] {};
/*------ Method for read uploded csv file ------*/
uploadDealcsv.prototype.getCsv = function[e] {
let input = document.getElementById['dealCsv'];
input.addEventListener['change', function[] {
if [this.files && this.files[0]] {
var myFile = this.files[0];
var reader = new FileReader[];
reader.addEventListener['load', function [e] {
let csvdata = e.target.result;
parseCsv.getParsecsvdata[csvdata]; // calling function for parse csv data
}];
reader.readAsBinaryString[myFile];
}
}];
}
/*------- Method for parse csv data and display --------------*/
uploadDealcsv.prototype.getParsecsvdata = function[data] {
let parsedata = [];
let newLinebrk = data.split["\n"];
for[let i = 0; i < newLinebrk.length; i++] {
parsedata.push[newLinebrk[i].split[","]]
}
console.table[parsedata];
}
var parseCsv = new uploadDealcsv[];
parseCsv.getCsv[];
Đã trả lời ngày 29 tháng 5 năm 2018 lúc 7:08May 29, 2018 at 7:08
Trong bài viết này, tôi sẽ giải thích với một ví dụ, cách đọc tệp CSV trong JavaScript bằng API tệp HTML5.
Tệp CSV [tệp văn bản phân tách bằng dấu phẩy] sẽ được chọn trong phần tử HTML5 Fileupload và sẽ được đọc bằng API Filereader HTML5.
Dữ liệu đọc sẽ được phân tích cú pháp vào các hàng và cột và sẽ được hiển thị trong bảng HTML.
Đọc tệp CSV trong JavaScript bằng API tệp HTML5
Đánh dấu HTML bao gồm một điều khiển tải FilePload [đầu vào tệp HTML] và nút HTML tức là tải lên.
Khi nút được nhấp, chức năng tải lên JavaScript được gọi.
Bên trong chức năng, đầu tiên một kiểm tra được thực hiện để xác minh xem tệp là CSV hoặc tệp văn bản hợp lệ. Sau đó, kiểm tra được thực hiện để đảm bảo liệu trình duyệt có hỗ trợ API tệp HTML5 hay không.
Khi các kiểm tra trên được xóa thì nội dung của tệp CSV được đọc dưới dạng chuỗi văn bản và sau đó chuỗi được chia thành các phần bằng dấu phẩy và các ký tự dòng mới và cuối cùng được hiển thị dưới dạng bảng HTML.
& nbsp; & nbsp; & nbsp; chức năng tải lên [] {function Upload[] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var fileupload = document.getEuityById ["fileupload"];var fileUpload = document.getElementById["fileUpload"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var regex = /^[wasta-za-z0-9\s_\\.\ -: []+[.csv|.txt]$/;var regex = /^[[a-zA-Z0-9\s_\\.\-:]]+[.csv|.txt]$/;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [regex.test [fileupload.value.toleowercase []]] {if [regex.test[fileUpload.value.toLowerCase[]]] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if [typeof [filereader]! = "không xác định"]if [typeof [FileReader] != "undefined"] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var reader = new filereader [];var reader = new FileReader[];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; reader.onload = function [e] {function [e] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var bảng = document.createelement ["bảng"];var table = document.createElement["table"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var hàng = e.target.result.split ["\ n"];var rows = e.target.result.split["\n"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; for [var i = 0; i 1] {if [cells.length > 1] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var row = bảng.Insertrow [-1];var row = table.insertRow[-1];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;for [var j = 0; j < cells.length; j++] {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var cell = row.insertCell [-1];var cell = row.insertCell[-1];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cell.innerhtml = tế bào [j];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var dvcsv = document.getEuityById ["dvcsv"];var dvCSV = document.getElementById["dvCSV"];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; dvcsv.innerhtml = "";"";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; DVCSV.AppendChild [Bảng];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; reader.readastext [fileupload.files [0]];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } khác {else {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;"This browser does not support HTML5."];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; } khác {else {
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cảnh báo ["Vui lòng tải lên tệp CSV hợp lệ."];"Please upload a valid CSV file."];
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; }
& nbsp; & nbsp; & nbsp; }
Ảnh chụp màn hình
Nội dung của tệp CSV được đặt trên thư mục người dùng
Tệp CSV được hiển thị trong Trình duyệt dưới dạng bảng HTML
tính tương thích của trình duyệt web
Mã trên đã được kiểm tra trong các trình duyệt sau chỉ trong các phiên bản hỗ trợ HTML5.
* Tất cả các logo trình duyệt được hiển thị ở trên là thuộc tính của chủ sở hữu tương ứng của họ.
Tải xuống
Tải xuống API Word/PDF/Excel miễn phí