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>
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.
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…
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.
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
gud one… thnx
hi,
Thanks for the article