Multiple File Uploader JS + HTML5

Using a jQuery Plugin called Fine

by _andrewclarkson

HTML

<script src="https://raw.github.com/valums/file-uploader/master/client/fileuploader.js"></script>
<input type="file" id="fileInput" name="files[]" multiple/>
<ul id="list"></ul>
<ul id="ajax"></ul>

CSS

li span {
  margin-left: 5px;               
}

JavaScript

//This will contain our files  
var data = Array();

//Function to check whether or not this will work
var supported = function () {
    
  //All of the stuff we need
  if (window.File && window.FileReader && window.FileList && window.Blob && window.XMLHttpRequest) {   
    return true;  
  } else {
    return false;
  }
};

//The Input File has Been Loaded Into Memory!
var loaded = function(event) {
  //Push the data into our array
  //But don't start uploading just yet        
  data.push(event.target.result);
};

var uploadFile = function(event) {
  //Needs a Better Way to
  //Link Data to Button
  var id = $(this).attr('data');
  $.ajax({
    type: "POST",
    //JSFiddle Echo Server
    url: "/echo/html/",
    
    data: {
      "html": "<li><a target=\"_blank\" href=\"" + data[id] + "\">link</a></li>"
    },
    success: function(data) {
      $("#ajax").append(data);
    },
      dataType: 'html'
    });
};

var processFiles = function(event) {
    
  //If not supported tell them to get a better browser
  if(!supported) {
      alert('upgrade your browser');
      return; 
  }
   
  //Our iterator's up here? as specified by JSLint      
  var i;  
    
  //Get the FileList Object - http://goo.gl/AkgYa
  var files = event.target.files;
  
  //Loop through our files  
  for (i = 0; i < files.length; i += 1) {
    
    //Just for Clarity Create a New Variable
    var file = files[i]; 
    
    //A New Reader for Each File  
    var reader = new FileReader();
    
    //Build the File Info HTML  
    var fileInfo = ["<li>",
                     file.name,
                     //Get Size in Kilobytes 
                     "<span>",
                     file.size / 1024,
                     " kb</span>", 
                     //Make Upload Button
                     "<button class=\"upload\" data=\"",
                     i,
                     "\">Upload</button>",
                     "</li>"].join(''); 
      
    //Add the Info to the list
   ...