jquery.uploadPreviewer.js
jQuery.uploadPreviewer.js is a jQuery plugin that turns a file input into a file upload previewer.
Check the demo page here.
Basic Usage
Initialization
<input type='file' /> var myFileUploader = $('input[type=file]').uploadPreviewer(options, callback);Submitting Files
Submitting the files with optional callbacks
var successCallback = function(data, status, jqXHR) { ... }; var errorCallback = function(jqXHR, status, error) { ... }; myFileUploader.submit(successCallback, errorCallback);Listening to file submit complete event
$(document).on('file-preview:submit:complete', function(e) { if (e.status == 'success') { // The event object has data, status and jqXHR } else if (e.status == 'error') { // The event object has error, status and jqXHR } else if (e.status == 'no-files') { } });Options
| Key | Description | Optional |
|---|---|---|
| preview_table | The table that will contain the file previews. e.g. "#pictures-table" | Yes |
| preview_row_template | A function that will return a template | Yes |
| url | URL where the post request is made to | No |
NOTE: It is not necessary to pass the url on initialize. It can be set before submit by calling the url function with the url as the argument.
Preview Table Row Template
A default row template is provided if you don't provide one. Otherwise, the variables provided to the template include are
src(image source)name(filename)size(filesize)placeholderCssClass(it should be attached to the image, which will provide a placeholder based on the file type if the file is not an image).
Credits
Jiangping Hsu for supplying the file icons
