download

jQuery Fileuploader Plugin . Documentation

| Updated: August 2, 2011
View Demo | Download

Browser Support:

The plugin is tested on:

  • Microsoft Internet Explorer 7.0+
  • Google Chrome - 7.0+
  • Safari - 4.0+
  • Mozilla Firefox - 3.0+
  • Opera - 10.0+

Plugins Option:

  1.  
  2. $(function(){
  3. 	$('#yourInputFileId').fileUploader({
  4. 		autoUpload: false,
  5. 		limit: false,
  6. 		buttonUpload: '#px-submit',
  7. 		buttonClear: '#px-clear',
  8. 		selectFileLabel: 'Select files',
  9. 		allowedExtension: 'jpg|jpeg|gif|png',
  10. 		timeInterval: [1, 2, 4, 2, 1, 5], //Mock percentage for iframe upload
  11. 		percentageInterval: [10, 20, 30, 40, 60, 80],
  12.  
  13. 		//Callbacks
  14. 		onValidationError: function(e) {
  15.  
  16. 		},
  17. 		onFileChange: function(e, form) {
  18.  
  19. 		},
  20. 		onFileRemove: function(e) {
  21.  
  22. 		},
  23. 		beforeUpload: function(e) {
  24.  
  25. 		},
  26. 		beforeEachUpload: function(form) {
  27.  
  28. 		},
  29. 		afterEachUpload: function(data, status, formContainer) {
  30.  
  31. 		},
  32. 		afterUpload: function(formContainer) {
  33.  
  34. 		}
  35. 	});
  36. });
  37.  

Option:

OPTION DEFAULT VALUE DESCRIPTION
limit false Limits the file to be uploaded
buttonUpload #pxUpload Selector of the button Upload
buttonClear #pxClear Selector of the button Clear
allowedExtension jpg|jpeg|png|gif allow extensions. Make sure that when using "|" the next string is not empty or else all of file extensions are allowed
onValidationError null return function(e) { }
Custom message if invalid file is selected
onFileChange empty function return function(e, form) { }
trigger after the file is selected
onFileRemove empty function return function(e) { }
trigger after the file is removed
beforeUpload empty function return function(e) { }
trigger after the submit button is click
beforeEachUpload empty function return function(form) { }
trigger before each file could be uploaded ::: returns each Form
afterEachUpload empty function function(data, , status, formContainer) { }
trigger after each file has been uploaded
data: is the data that is sent from the controller
status: success, abort, error
formContainer: form container
afterUpload empty function return function(e) { }
trigger after all files are uploaded

Example

PHP: PHP File Upload

Codeigniter: Codeigniter File Upload

Cakephp: Cakephp Media Plugin