Geek Answers Handbook

Automatically import local CSV file using javascript or jquery

My client wants to create a website that includes the import of CSV data WITHOUT hosting on the server. The idea is that their sellers can showcase their products without having web access or hosting configured on their PCs. They will also be able to update data by exporting a new CSV file from an original Excel document without any knowledge of HTML or Javascript.

I found quite a few solutions on the Internet - for example, Papa Parse ( http://papaparse.com/ ), but all of them require the user to choose with <input type="file" /> . For example, the following script using Papa Parse works fine:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test CSV</title> </head> <body> <input type="file" /> </body> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/jquery.parse.min.js"></script> <script language="javascript"> $('input').change(function(e) { $('input[type=file]').parse({ complete: function(data) { console.log('Parse results:', data.results); } }); }); </script> </html>

My problem is that I need to be able to hard-code the location of the CSV file so that when I open the web page, the data is automatically displayed without any further interaction from the user. Is it possible? Or did I miss something really basic?

+2
javascript jquery csv local
source share
2 answers

Firmly set the values ​​inside the non-javascript type script tag, for example text/csv , then extract it using innerHTML or $("#unparsed").html()

 <script type="text/csv" id="unparsed"> url,title,size images/address-book.png?1354486198, Address Book, 1904 KB images/front-row.png?1354486198, Front Row, 401 KB images/google-pokemon.png?1354486198, Google Pokémon, 12875 KB ... </script> $(function parseData(){ $("#file").hide(); var data = $("#unparsed").html(); var parsed = $.parse(data); $("#parsed").val(JSON.stringify(parsed)); })

http://jsbin.com/racanefi/10/edit

Rigidly set the values ​​inside the text box.

 $(function parseData(){ $("#file").hide(); var data = $("#unparsed").val(); var parsed = $.parse(data); $("#parsed").val(JSON.stringify(parsed)); })

http://jsbin.com/racanefi/8/edit

OR

Store the value in localStorage.

 var storage = localStorage; var key = 'unparsed_text_file'; function getFile(){ $("#file").change(function(){ var file = $(this).eq(0)[0].files[0], reader = new FileReader(); reader.onload = function(e) { var text = reader.result; storage.setItem(key,text); parseData(); }; reader.readAsText(file); }); } function parseData(){ $("#file").hide(); var data = storage.getItem(key); var parsed = $.parse(data); $("#unparsed").val(data); $("#parsed").val(JSON.stringify(parsed)); } if(storage.getItem(key)) parseData(); else getFile();

http://jsbin.com/racanefi/6/edit

Browser Compatibility: http://caniuse.com/namevalue-storage

This is a rough project, you should probably verify it correctly before implementing it.

edit: I had this back; sessionStorage is temporary for sessions. localStorage is more persistent. I created a variable that allows you to assign var storage

+5
source share

PapaParse is quality material, but for complete satisfaction here, as is done with jquery-csv

 <html> <head> <meta charset="utf-8" /> <title>Demo - CSV-to-Table</title> </head> <body> <div id="inputs" class="clearfix"> <input type="file" id="files" name="files[]" multiple /> </div> <hr /> <output id="list"> </output> <hr /> <table id="contents" style="width:100%; height:400px;" border> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://evanplaice.imtqy.com/jquery-csv/src/jquery.csv.js"></script> <script> $(document).ready(function() { if(isAPIAvailable()) { $('#files').bind('change', handleFileSelect); } }); function isAPIAvailable() { // Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { // Great success! All the File APIs are supported. return true; } else { // source: File API availability - http://caniuse.com/#feat=fileapi // source: <output> availability - http://html5doctor.com/the-output-element/ document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />'); // 6.0 File API & 13.0 <output> document.writeln(' - Google Chrome: 13.0 or later<br />'); // 3.6 File API & 6.0 <output> document.writeln(' - Mozilla Firefox: 6.0 or later<br />'); // 10.0 File API & 10.0 <output> document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />'); // ? File API & 5.1 <output> document.writeln(' - Safari: Not supported<br />'); // ? File API & 9.2 <output> document.writeln(' - Opera: Not supported'); return false; } } function handleFileSelect(evt) { var files = evt.target.files; // FileList object var file = files[0]; // read the file metadata var output = '' output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n'; output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n'; output += ' - FileSize: ' + file.size + ' bytes<br />\n'; output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n'; // read the file contents printTable(file); // post the results $('#list').append(output); } function printTable(file) { var reader = new FileReader(); reader.readAsText(file); reader.onload = function(event){ var csv = event.target.result; var data = $.csv.toArrays(csv); var html = ''; for(var row in data) { html += '<tr>\r\n'; for(var item in data[row]) { html += '<td>' + data[row][item] + '</td>\r\n'; } html += '</tr>\r\n'; } $('#contents').html(html); }; reader.onerror = function(){ alert('Unable to read ' + file.fileName); }; } </script> </body> </html>

The detection function (i.e. which browsers will not work) is built-in, and the file must be loaded through the file dialog box, because the protective blocks of the isolated program protect access to the file system directly.

Disclaimer: I am the author of jquery-csv.

+1
source share

More articles:


All Articles