William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

jQuery plugin: Plupload for multi-files upload

According to PLUPLOAD, it allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.
I am going to use PLUPLOAD to upload multi-files to server.

The example it provides is:

<form method="post" action="javascript:void();" id="form_uploader">
<div id="uploader">
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus 
      or HTML5 support.</p>

It is excellent, the uploading effects are very cool. However, I wan to add more extra <input> fields within the default sample, to upload them together. The codes become:

<form method="post" action="javascript:void();" id="form_uploader">
  <label for="title">Title:</label>
  <input type="text" id="title" name="title" />
  <label for="comment">Comment:</label>
  <br />
  <textarea name="comment" id="comment" rows="4" cols="45"></textarea>
 <div id="uploader">
  <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus 
      or HTML5 support.</p>

The added fields ‘title‘ and ‘comment‘ don’t be identified after post. The server-side php scripts can’t find the 2 new fields(in $_POST). I googled and found there is very few tips and soultion, and had to process by myself. By analysing the Plupload source codes, finally I made it work. The steps: (all the following JS codes is added directly below the file-upload form.)

//(1) in $("#uploader").pluploadQueue({}), add following to initialize:
multipart_params: { 'title': '','comment': '' },

//(2) add the following right after $("#uploader").pluploadQueue({}). 
var uploader = $('#uploader').pluploadQueue();
uploader.bind('FilesAdded', function(up, files) {
 uploader.settings.multipart_params.title = $("#title").val();
 uploader.settings.multipart_params.comment = $("#comment").val();       

When submit button clicks, the form executes the events binding within it. The ‘FilesAdded’ event is a internal event which assigns form’s dynamic variables. In this period, the new added dynamic varaibles ‘title’ and ‘comment’ are actived.

The posted parameters past to php script are correct. So I can put the ‘title’, ‘comment’ together with uploaded multi-files to server-side store medium – database and directory.
They work fine.


5 responses to “jQuery plugin: Plupload for multi-files upload

  1. joe@gmail.com 10/21/2011 at 9:40 pm

    why do you say “When submit button clicks”, i dont see submit button in your markup, i did this test but i get multiple rows inserted in the database when uploading one image

    • williamjxj 10/23/2011 at 12:38 am

      1. the original form is init() when in $(document).ready().
      The plupload will rewrite the original form: hide the normal textarea, add virtual textarea and other stuff, and; the submit button.

      2. just focus on the plupload events: (http://www.plupload.com/example_events.php). All are controlled by these events.
      You can add extra behaviors to these events, e.g.: like my codes, adding some variables in the event ‘FilesAdded’.
      So when the event ‘FilesAdded’ is fired, these new added codes are called.

      3. Extra step: I prefer to use <iframe> instead of ajax when uploading, the benefit is to use orginal http request, instead of some wired problems when form.serialize().
      I will write something on this in future.

  2. daigiavabagia 12/20/2011 at 1:56 am

    oh, nice post
    thanks williamjxj,

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: