jQuery SimpleFilePreview
SimpleFilePreview is a jQuery plug-in that allows for pre-form submission file previews on images and icon previews for non-images. The syntax is extremely simple and the UI allows for easy CSS styling.
Requires jQuery 1.7+
Main Features
- Simple to implement
- Show pre-submit image file preview in browsers that support this functionality
- Show image file previews for any file post-upload
- Show icon previews for any file type in all browsers
- Works on "multiple" file inputs as well as single file inputs
- Completely stylable
- Small footprint
Options
'buttonContent': STRING HTML content for the button to add a new file (defaults to "Add File") 'removeContent': STRING HTML content for the removal icon shown on hover when a file is selected (or for existing files) (defaults to "X") 'existingFiles': OBJECT|ARRAY If an object, the key for each entry is used in the file remove hidden input. An array uses the numeric index for the removal input (defaults to null, that is, no existing files) 'shiftLeft': STRING HTML content for the button to shift left for multiple file inputs (defaults to "<<") 'shiftRight': STRING HTML content for the button to shift right for multiple file inputs (defaults to ">>") 'iconPath': STRING The path to the folder containing icon images (when a preview is unavailable) - should be absolute, but if relative, must be relative to the page the file input is on (defaults to cur. dir.) 'defaultIcon': STRING The file name to use for the defualt preview icon (when a proper file-type-specific icon cannot be found) (defaults to "preview_file.png") 'icons': OBJECT A mapping of file type (second half of mime type) to icon image file (used in combination with the "iconPath" option) (default value includes most common file types in this format: {'png': 'preview_png.png', ...} Basic Usage
Single File
<input type='file' id='ex1' name='ex1' />$('input[type=file]').simpleFilePreview();Multiple Files
<input type='file' id='ex2' name='ex2[]' multiple='multiple' />$('input[type=file]').simpleFilePreview();You can see more examples on my personal site.
Tested Browsers
- Firefox 16+
- Internet Explorer 8+
- Chrome 22+
