Easy jQuery multifile uploader


I needed a quick and dirty multi-file uploader for a site, but I did not want to install another plugin or a flash uploader.  I am using the jQuery form plugin already to handle AJAX form submissions so I will hook to that to upload my files to the site.

My method basically uses jQuery to inject a form with a filefield into the DOM.  I bind to the onchange event of the filefield so when a file is added the current file field is hidden, insert a new blank file field, and update a list of queued files waiting to be uploaded.  When the user hits the “Upload Files” button, I iterate through all the “input:file” elements using jQuery and submit the form using the jQuery form plugin with ajaxForm().  Of course, you can remove a file from queue as well by clicking on the X in the queue list.

It is an inelegant solution, but it does work.  Here is the code if you want to give it a try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multi-file upload</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
</head>

<body>
 <div id="uploadContainer"></div>
 <input id="btnSubmit" type="button" value="Submit Files" onclick="submitLoop();" />
 <div id="fileInfo"/>

 <script language="javascript">
  $(document).ready(function(){
   $container = $('#uploadContainer');
   $info = $('#fileInfo');
   count=0;                            
   addUpload();
  });
 function addUpload(){
  count++;
  $('form').hide();
  $container.append('<form id="uploadForm-' + count +'" action="ajaxProxy.cfc?method=upload" enctype="multipart/form-data"><input id="file-' + count + '" name="filename" type="file" onchange="addUpload();" /></form>');
  showFileInfo();
 }
 function removeItem(id){
  if( $('#' + id).length){
   $('#' + id).remove();  
   showFileInfo();
  }
 }
 function showFileInfo(){
  $info.html('');
  $('input:file').each(function(){
   if( $(this).val().length ){
    $info.append('<div id="display-' + $(this).attr('id') + '"><a href="#" onclick="removeItem(\'' + $(this).parent().attr('id') +'\')">X</a> '  + $(this).val() + '</div>');
   }
  });
 }
 function submitLoop(){
  $('input:file').each(function(){
   var currItem = $(this).attr('id');
   if($(this).val()){
    $(this).parent().ajaxForm({
     async: false,
     success: function(data){
      var incoming = $.parseJSON(data);
      $('#display-' + currItem).append(' <strong>' + incoming.svrMessage + '</strong>');
     }
    }).submit();
   }
  });
 }
 </script>
</body>
</html>
Advertisements

About Robert Zehnder

Web application developer specializing in ColdFusion/Railo and Open Source development.

Posted on March 30, 2010, in ajax, ColdFusion, jQuery, Railo. Bookmark the permalink. 10 Comments.

  1. Hi
    Thanks for the article. Is there any way to allow a user to select multiple files at the same time, instead of having to open the dialog for each and every file?

    • I believe some browsers may support multiple file selection but not all. If you are wanting to be able to “batch upload” files then you are probably better off using a flash front end, which is what most of the ajax uploaders use.

  2. Can you share your ajaxProxy.cfc? I can’t seem to get this to work and I think it’s because I don’t have that file…

  3. Here is the stripped down ajaxProxy.cfc for one of my projects. Granted, this code has not been tested, but I pulled it from a production box so it should get you moving in the right direction.

    Grrr.. Comment system is stripping out code. I will create a new post for it.

  4. hey , can i have a scipt with html and js which can upload and show the download in the same page without redirection , i mean with the help of xmlhttpview

    😀

    also containg php but the upload be with html

  5. hi,
    Thanks for the article

  1. Pingback: Easy jQuery multifile uploader « KISDigital Blog | RefreshTheNet

  2. Pingback: 10個アヤクスをアップロードしてアドイン | テクニカルブログ

  3. Pingback: 10+ Jquery Ajax File Uploader Plugins for web developers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: