leggere file .csv con javascript/jquery

psicona

Utente Attivo
10 Mar 2017
24
1
3
Ciao a tutti,
dopo aver scaricato diversi esempi ne ho trovato uno perfettamente funzionante che potrebbe fare al caso mio, per leggere un file .csv lato client.

Questo è il codice, copiato su un file .html e verificato il funzionamento:
Codice:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#upload").bind("click", function () {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
                if (regex.test($("#fileUpload").val().toLowerCase())) {
                    if (typeof (FileReader) != "undefined") {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var table = $("<table />");
                            var rows = e.target.result.split("\n");
                            for (var i = 0; i < rows.length; i++) {
                                var row = $("<tr />");
                                var cells = rows[i].split(",");
                                for (var j = 0; j < cells.length; j++) {
                                    var cell = $("<td />");
                                    cell.html(cells[j]);
                                    row.append(cell);
                                }
                                table.append(row);
                            }
                            $("#dvCSV").html('');
                            $("#dvCSV").append(table);
                        }
                        reader.readAsText($("#fileUpload")[0].files[0]);
                    } else {
                        alert("This browser does not support HTML5.");
                    }
                } else {
                    alert("Please upload a valid CSV file.");
                }
            });
        });
    </script>
    <input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" />
    <hr />
    <div id="dvCSV">
    </div>

Il cambiamento è che non voglio passare per un button e selezionare un file, ma inserirlo direttamente nel codice (ho solo questo file e non mi serve una dialog per sceglierlo).
Ho provato a inserire il nome del file direttamente al posto di #fileUpload ad inizio dello script ma non funziona.
Dove ho sbagliato?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi semplicemente fare cosi
Codice:
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<div id="risultato"></div>
<script>
    $.get('file.csv', function (file) {
        var riga = file.split(";");
        $.each(riga, function (elem) {
            $('#risultato').append('<p>' + riga[elem] + '</p>');
        });
    });
</script>
 

psicona

Utente Attivo
10 Mar 2017
24
1
3
grazie criric,
ho provato ma non funziona il tuo codice.
O, meglio, per capire se viene esguito lo script ho messo due alert, uno prima del get e uno prima della chiusura dello script e vengono visualizzati.
Ma tutto ciò che c'è dopo il $.get non va.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ovviamente devi cambiare 'filer.csv' con il percorso del tuo file.
metti degli alert anche allinterno
 

psicona

Utente Attivo
10 Mar 2017
24
1
3
certo, ho messo il nome del mio file e messo degli alert interni.
nessun alert interno viene visualizzato, mentre i due esterni si.

Come se non leggesse nemmeno il file.
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Forse ho capito male, il file lo hai sul server o è sul pc dell'utente.
Se è sul pc dell'utente l'unico modo per leggerlo è di caricarlo prima sul server.
 

psicona

Utente Attivo
10 Mar 2017
24
1
3
è sul pc.
Non devo far altro che caricare il contenuto del csv in una select option
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
allora devi per forza utilizzare l'input di tipo file. Non puoi andare a leggere i file di un utente senza il suo permesso.
 

psicona

Utente Attivo
10 Mar 2017
24
1
3
Grazie, ora mi è tutto chiaro.
L'unica maniera quindi è caricare su un server il file suddetto e fare in modo che l'applicazione/pagina web punti a quello.
Ultima domanda che ti faccio: questa questione di sicurezza vale anche per una APP ibrida html5? Immagino di si, quindi il problema dovrei ovviarlo allo stesso modo, caricando ogni volta la lista dal file uploadato
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Da quel poco che so, un app ibrida in html gira su un browser interno ad un framework,
quindi se per esempio il framework è scritto in C puoi utilizzare le funzioni del linguaggio C per leggere i file sul disco ed esportarle poi in javascript.
Ma qui siamo un po oltre le mie conoscenze.
 

psicona

Utente Attivo
10 Mar 2017
24
1
3
Ho appena provato (sto utilizzando Intel XDK). Il codice iniziale della tua risposta funziona e carica i dati del csv direttamente nella select. Quindi con una app ibrida funziona. Unico neo, quando tu indichi:
Codice:
$('#risultato').append('<p>' + riga[elem] + '</p>');
Ottengo un elenco sia di valori che di etichetta, mentre nel file le righe sono così:
label1;valore1
label2;valore2
etc
bisogna quindi creare due array, in modo che con l'indice dovrei modificare la tua riga in questo modo:
Codice:
$('#risultato').append('<option value="' + riga[elem0] +'">' + riga[elem1] + '</option>');
ma non riesco a creare correttamente i due array, da cui estraggo il valore a seconda dell'indice
 

psicona

Utente Attivo
10 Mar 2017
24
1
3
Risolto:
Codice:
    $.get('coefficienti.csv', function (file) {
        allTextLines = file.split(/\r\n|\n/);
            $.each(allTextLines, function (elem) {
                var riga = allTextLines[elem].split(";");
                        $('#etaPensione').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');
            });
    });
 
  • Like
Reactions: criric
Discussioni simili
Autore Titolo Forum Risposte Data
G leggere file txt e stampare con php il contenuto a video PHP 7
F Leggere e aggiornare dati di campi <input text> su file di test PHP 0
felino Script PHP per leggere un file JSON. autenticazione? PHP 4
C Leggere dati File.XMLcon PHP XML 11
M Leggere il contenuto di una cartella e memorizzare il nome file in mysql PHP 1
I [Javascript] Leggere "var" da file .js esterno (per google map) Javascript 6
H Interpretare e leggere il file log di sfc/scannow. Windows e Software 0
Monital Leggere un file php contenente dati json PHP 10
Trapano Leggere un file .txt dal fondo PHP 7
Francesco Polese Leggere linea da un file ed eliminarla PHP 2
F Leggere file contenuti in cartella e modificarne il nome PHP 3
M Leggere dati da file excel in base al nome del foglio di lavoro PHP 0
napuleone type="file" leggere con js Javascript 3
M Leggere file di grandi dimensioni Java 2
D leggere il contenuto di un file di testo in un file .JS Javascript 11
L file. leggere dall'ultima riga alla prima PHP 1
L [c++] Problema leggere file txt riga per riga C/C++ 0
Trapano [risolto] Leggere da un file txt in ordine inverso PHP 2
K Leggere contenuto di una cartella quando viene aperto il file PHP 6
F leggere file xls Classic ASP 0
neo996sps [risolto] Usare PHP per leggere da file XML PHP 3
M leggere determinati punti di un file txt PHP 2
M Problema leggere su file di testo remoti PHP 11
E Leggere file tramite FTP/TLS PHP 11
A Leggere file txt e azioni su form PHP 1
L Leggere un file .txt tramite FTP e trascriverlo in una RichTextBox Visual Basic 0
G leggere file xml su server remoto Ajax 0
S leggere da file e scrivere su file un carattere o una parola alla volta Visual Basic 1
F Leggere e salvare caratteri da file di testo PHP 2
L leggere file xml dove i tag sono del tipo <stringa:altra_stringa> PHP 0
L leggere un file xml XML 1
S [C] Leggere i dati da un file e salvarli in una matrice Programmazione 1
L word: leggere i file temporanei Windows e Software 1
P leggere i file in una sottodir PHP 6
D Leggere i file di una cartella ed il loro contenuto PHP 5
LaKanka Leggere dati da file xml PHP 19
F leggere file txt zippato su altro server, come fare ? PHP 4
N leggere/sostituire/restituire file txt PHP 1
T Leggere file in directory e sottodirectory con ASP Classic ASP 3
Vale1976 leggere file da altro pc in rete PHP 2
S [VB.net 2005] Leggere file di testo come un database Programmazione 0
E Leggere file txt da altro server Classic ASP 4
G Leggere file testo lato client Javascript 1
2 Leggere una pagine che è nei file temporanei HTML e CSS 1
M Leggere in un report il valore di una casella combinata di una maschera Database 0
otto9due Leggere valore da array multidimensionale a chiavi dinamiche PHP 1
D PHP leggere cartella di Windows PHP 1
S Leggere dati da API e visualizzarli PHP 0
elpirata Query per leggere dati da una tabella mysql e mostrarli a video in base a parametri passati tramite GET PHP 5
maxbossi Attenzione alle TRUFFE: Leggere attentamente!!! Annunci servizi di Social Media Marketing 0

Discussioni simili