Basically, I want to upload ONLY a CSV file via Javascript or jQuery.

I want to try and do this without any PHP involved.

I need to use a HTML upload form, and then save only it's contents to a multidimensional array or a string.

I do not need to save the uploaded file to the server, I just need to save it's contents to a string as stated.

I have looked far and wide online, yet everything involves PHP.

Is this possible with just Javascript or jQuery?

Thanks in advance

Basically, I want to upload ONLY a CSV file via Javascript or jQuery.

I want to try and do this without any PHP involved.

I need to use a HTML upload form, and then save only it's contents to a multidimensional array or a string.

I do not need to save the uploaded file to the server, I just need to save it's contents to a string as stated.

I have looked far and wide online, yet everything involves PHP.

Is this possible with just Javascript or jQuery?

Thanks in advance

• javascript
• jquery
• csv

4 Answers 4

This uses a library I wrote and released under the GPLv3 License: html5csv

The example below uploads a CSV file into the browser, where it is available as an array of arrays.

The library supports various block operations, such as make a table, edit, plot, fit, call a function, save in browser session storage or local storage.

JSFIDDLE

html

Choose a CSV file to load into the application:   
<input id='foo' type='file'>
<hr />

js (requires jQuery and html5csv.js)

CSV.begin('#foo').
      table('output', {header:1, caption:'Uploaded CSV Data'}).
      go();

Here, go() can take a function callback (e,D), where e will contain an error string or null, and D is an object that may contain D.rows[0][0],...,D.rows[n-1][m-1] for a n x m matrix of data. Row 0 may be a header row.

Asynchronicity is used, in fact enforced in places. So beware that like AJAX, this code will return immediately to the subsequent line, and is best read as setting up a workflow of what to do when the previous step bees ready.

Saving/Restoring

You can save data into the user's browser localStorage object with .save('local/someKey'). somewhere in the workflow, and data existing in the array at that point will be stored in HTML5 local storage (perhaps even pressed if you include the LZString library as documented), until the browser user deletes it.

Then in the same page or another page on the same web site you can get the data back out with CSV.begin('local/someKey')...

Using the data

You should put any code you want to use the data into a function that can fit either the callbacks expected by html5csv's call or go as documented on the html5csv site.

The jQuery CSV plugin can use client-side file handling (no need for server-side script like PHP):

https://code.google./p/jquery-csv/#Client-Side_File_Handling

You can use plugin which allow you to parse CSV into Array.

http://code.google./p/jquery-csv/

Features

• Convert a CSV String to an array
• Convert a multi-line CSV string to a 2D array
• Convert a multi-line CSV string to an array of objects (ie header:value pairs)
• Convert an array of values to CSV (under development)
• Convert an array of objects to CSV (under development)
• Hooks/Callbacks to extend the default parsing process
• Customizable delimiter (default: ") and separator (default: ,) characters
• Node.js support (ie CommonJS importing and async callback support)

To do the upload, you need to be able to read the file off the disc. You can do this with the HTMl5 File API. I'm sure there are jQuery libraries to simplify this, but that's the underlying tech.

Someone else posted a question (and solution) on how to do that with jQuery: html5's file api example with jquery?

Once you've got access to the file in the browser, use a CSV library to work with it.