Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
/*--------------------------------------*
* [jQuery] Show thumbnails for any upload files
*--------------------------------------*/
$.fn.uploadThumbs = function (option) {
option = $.extend({
position : 0, // 0:before, 1:after, 2:parent.prepend, 3:parent.append,
// any: arbitrarily jquery selector
imgbreak : false, // append <br> after thumbnail images
exclusion : true, // do exclusion image control
checkbox : ':checkbox, label, .checked_images', // selector to find checkbox for exclusion image control
alternate : '.alt' // selecter for alternate view input file names
}, option || {});
this.change(function () { $.fn.uploadThumbs.run.call(this, option) });
this.each(function () {
var $self = $(this);
// set exclusion event
$.fn.uploadThumbs.exclusion_event.call($self, option);
});
return this;
};
// preview thumbnail images
$.fn.uploadThumbs.run = function (option) {
var $self = $(this);
// clear thumbnail images
$.fn.uploadThumbs.clear.call($self, option);
// HTML5 ?
if (window.File && window.FileReader && this.files) {
var filenames = [];
for (var i = 0, I = this.files.length; i < I; i++) {
var file = this.files[i];
if (file && (file.type && file.type.match(/^image/) // image ?
|| !file.type && file.name.match(/\.(jp[eg]+|png|gif|bmp)$/i) && $.browser.msie)) {
var reader = new FileReader();
reader.onload = function (file, i) { return function () {
var tag = '<img src="'+ this.result +'" alt="'+ file.name +'" title="'+ file.name +' ('+ Math.round( file.size / 1024 ) +'kb)' +'" class="thumb" />';
// set thumbnail images
$.fn.uploadThumbs.set.call($self, option, tag);
}}(file, i);
reader.readAsDataURL(file); // read image data
// add filenames
filenames.push(file.name);
}
}
// file names
var alt = (filenames.length) ? filenames.join(', ') : null;
// exclusion control
$.fn.uploadThumbs.exclusion.call($self, option, alt);
}
// legacy IE
else {
var file = this.value;
if (file && !file.match('fakepath') && file.match(/\.(jp[eg]+|png|gif|bmp)$/i)) {
var img = new Image();
img.src = file;
img.onload = function () {
var filename = this.src.match(/([^\\\/]+)$/) ? RegExp.$1 : '';
var tag = '<img src="'+ this.src +'" alt="'+ filename +'" title="'+ this.src +'" class="legacy thumb" />';
// set thumbnail images
$.fn.uploadThumbs.set.call($self, option, tag);
};
if (img.complete) img.onload();
}
// file names
var alt = (!file) ? null : file.match(/([^\\\/]+)$/) ? RegExp.$1 : file;
// exclusion control
$.fn.uploadThumbs.exclusion.call($self, option, alt);
}
};
// clear thumbnail images
$.fn.uploadThumbs.clear = function (option) {
// clear file names
typeof this.data('alternate').attr('value') == 'undefined' ?
this.data('alternate').hide().text('') :
this.data('alternate') . val('');
// find images
var $images = (typeof option.position == 'number')
? this.siblings('img.thumb')
: $( option.position ).find('img.thumb');
// remove images
if ($images.length) {
$images.not('img.uploaded').next('br').remove()
.end().remove();
}
};
// set thumbnail images
$.fn.uploadThumbs.set = function (option, tag) {
var in_label = this.parent('label').length;
var tag_br = (option.imgbreak) ? "<br />\n" : "\n";
var $tag = (option.position == 1 || option.position == 3) ? $(tag_br + tag) :
$(tag + tag_br);
// append
(option.position == 0) ? this.before($tag) :
(option.position == 1) ? this. after($tag) :
(option.position == 2) ? this.parent().prepend($tag) :
(option.position == 3) ? this.parent(). append($tag) :
$(option.position).append($tag).show();
// as trigger in label ?
if (in_label) {
var $self = $(this);
$tag.click(function (e) {
$self.click();
return false;
});
}
};
// exclusion control
$.fn.uploadThumbs.exclusion = function (option, filenames) {
// no exclusion
typeof this.data('alternate').attr('value') == 'undefined' ?
this.data('alternate').show().text( filenames || '' ) :
this.data('alternate').show(). val( filenames || '' );
// hide previous image
if (option.exclusion) {
if (filenames) {
this.data('checkbox').attr('checked', false); // not inherit
this.siblings('img.uploaded').slideUp();
this.data('checkbox').siblings('img.uploaded').slideUp();
} else {
this.siblings('img.uploaded').slideDown();
this.data('checkbox').siblings('img.uploaded').slideDown();
}
}
};
// set exclusion event
$.fn.uploadThumbs.exclusion_event = function (option) {
var $self = this;
// alternate view input file names
if (!this.data('alternate')) {
var $alt_filenames = this.siblings( option.alternate ); // is in siblings ?
if ($alt_filenames.length == 0) // is in parent siblings ?
$alt_filenames = this.parent('label').siblings( option.alternate );
this.data('alternate', $alt_filenames);
typeof $alt_filenames.attr('value') == 'undefined' ?
$alt_filenames.hide().text('') : $alt_filenames.val('')
}
if (!option.exclusion) return;
// checkbox for exclusion images ?
if (!this.data('checkbox')) {
var $checked_images = this.siblings( option.checkbox ); // is in siblings ?
if ($checked_images.length == 0) // is in parent siblings ?
$checked_images = this.parent('label').siblings( option.checkbox );
if ($checked_images.find(':checkbox').length) // is in cousin ?
$checked_images = $checked_images.find(':checkbox');
this.data('checkbox', $checked_images);
}
// show/hide image with checkbox on/off
this.data('checkbox').change(function () {
var $this = $(this);
if ($this.is(':checked')) {
// cleanup
$.fn.uploadThumbs.clear.call($self, option);
// reset form
$self.siblings('img.uploaded').slideDown();
$this.siblings('img.uploaded').slideDown();
// reset <input:file>
var $clone = $self.clone();
$self.replaceWith( $clone );
$clone.uploadThumbs(option);
} else {
$self.siblings('img.uploaded').slideUp();
$this.siblings('img.uploaded').slideUp();
}
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment