jqUploader Demonstration

Use Case 1: as part of a form with other input fields

Example: send a picture by email, the user must fill in its email and its correspondant email address

In this scenario, When the upload is finished, the jquUploader is replaced by a text input field.

This makes it easy to then submit your form and save the file path to a database field for instance, along with the rest of the form fields.

Note that this behaviour can be switched off by providing a url to the "afterScript" option. in such case, after the upload is finished, the flash file will redirect to a new page, allowing, for instance, to show the user its uploaded image.

Note that if you wish to limit the maximum file size, simply add this bit of html in your upload form, right before the file input field: <input name="MAX_FILE_SIZE" value="1048576" type="hidden" />. In this way, even users without javascript enabled will not have to wait the end of the transfer to discover that their file is too heavy according to the server settings. This is for ergonomy, NOT security, so make sure you enforce a filesize check in your serverside upload script!

The code


  	$("#example1").jqUploader({
			background:           "FFFFDF",
			barColor:             "FFDD00",
			allowedExt:           "*.avi; *.jpg; *.jpeg; *.png",
			allowedExtDescr:      "what you want",
			params:               {quality:'low'},
			validFileMessage:     'Thanks, now hit Upload!',
			endMessage:           'and don\'t you come back ;)',
			hideSubmit:           false,
			endHtml:             '<strong style="text-decoration:underline">Upload finished!
      (the filename is now stored in the form as an hidden input field)</strong>'
	});

The form

Usecase 2: upload and go !

In example 2, the optional afterScript is used to point to a page where the flash should redirect when the upload is finished.


  $("input#example2").jqUploader({ afterScript:	"redirected.php",
      background:	"FFFFDF", barColor:	"64A9F6", allowedExt:     "jpg|JPG|jpeg|JPEG"
    });

The form

Usecase 3: upload and stay !

Example 3 is the same as example 1, but there is no redirection.

 $("input#example3").jqUploader({ background:	"FFFFDF",
      barColor:	"FF00FF", allowedExt:     "jpg|JPG|jpeg|JPEG"
    });