leggere file .csv con javascript/jquery

[psicona]

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:

    <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]

Ciao, puoi semplicemente fare cosi

<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]

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]

ovviamente devi cambiare 'filer.csv' con il percorso del tuo file.
metti degli alert anche allinterno

 

[psicona]

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.

 

[criric]

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]

è sul pc.
Non devo far altro che caricare il contenuto del csv in una select option

 

[criric]

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]

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]

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]

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:

$('#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:

$('#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]

Risolto:

    $.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>');
            });
    });