• Ajax CSV upload to a Table with jQuery and PHP

    Date: 2012.01.26 | Category: developer, developing, development, jquery, Php

    So I had to write a new user importer for School Email and I was looking for a simple plugin in solution but didn’t find one so here is a simple way of uploading a csv file that is uploaded to a file and rendered to a table..

    Projects used: CsvToTable & jQuery File Upload & Editable Grid *optional for live edits.

    Grab those two projects, grab the below files and put them in a /js folder then put the .js files into your head..

    Put the jQuery-File-Upload folder in your root, we will be uploading files to here.. You may want to add a layer of security in front of the upload function.

    <head>
<script src="/js/csvToTable.js"></script>
<script src="/js/jquery.iframe-transport.js"></script>
<script src="/js/jquery.fileupload.js"></script>
</head>

    At the bottom of your body add..

    <div id="csvToTable"></div>
<div id="fileupload"></div>
<script>
var loggedIn = 1; // you will want to modify this if you require auth
$(function () {
  if(loggedIn == "1"){
    $('#fileupload').fileupload({
      dataType: 'json',
      acceptFileTypes: '/(csv)$/i',
      url: '/jQuery-File-Upload/php/index.php',
      done: function (e, data, Users) {
        $.each(data.result, function(index, file){
          $('#csvToTable').html("");
          $('#csvToTable').CSVToTable(file.url).bind("loadComplete",function() {
            console.log("Loaded data into table");
            /*

            Call functions to manipulate data here

            */
          });;
        });
      }
    });
  }
});
</script>

    Want to make your table editor like the rest of the cool kids? Check out this jQuery plugin

    Report This Post

    Related posts:

    1. jQuery autocue plugin I have been working on a autocue/teleprompter jQuery plugin.  An autocue...
    2. Example jQuery package.json Report This Post...
    3. Get paid to add table support to Etherpad Lite The Etherpad community has done a great job lately and...
    4. Android Upload multiple files to picasa at once and automatically upload pictures when taking Anyone know if its possible upload multiple photos to picasa...
    5. Developing a collaborative game using NodeJS, SocketIO & jQuery Quick link to the game I made You may remember...