William Jiang

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

Tag Archives: plupload

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>
</div>
</form>

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">
 <div>
  <label for="title">Title:</label>
  <input type="text" id="title" name="title" />
 </div>
 <div>
  <label for="comment">Comment:</label>
  <br />
  <textarea name="comment" id="comment" rows="4" cols="45"></textarea>
 </div>
 <div id="uploader">
  <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus 
      or HTML5 support.</p>
 </div>
</form>

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.

TinyMCE, Plupload

2 wonderful web plugins:

  • TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor. TinyMCE is very easy to integrate into other Content Management Systems.

    It seems many web apps use it as inline textarea editor.

  • Plupload is a files uploader GUI tool, upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.

They are the products of Swedish company Moxiecode, very wonderful tools. I used TinyMCE already, and going to add Plupload accompanying with TinyMCE.

TinyMCE is very easy to use, the only issue that I can remember is that it doesn’t use jQuery’s val() to get textarea’s context, instead, it use its method .getContent().

To get textarea context, the following desn’t work:

var textarea=$('textarea').val();

Instead, use the following to make it work:

var textarea=tinyMCE.get('txtEntry').getContent();