diff --git a/js/jQuery.fileinput.js b/js/jQuery.fileinput.js index 3c2fbb8..bfd955c 100644 --- a/js/jQuery.fileinput.js +++ b/js/jQuery.fileinput.js @@ -2,86 +2,86 @@ * -------------------------------------------------------------------- * jQuery customfileinput plugin * Author: Scott Jehl, scott@filamentgroup.com - * Copyright (c) 2009 Filament Group + * Copyright (c) 2009 Filament Group * licensed under MIT (filamentgroup.com/examples/mit-license.txt) * -------------------------------------------------------------------- */ (function( $ ){ -$.fn.customFileInput = function(){ - //apply events and styles for file input element - var fileInput = $(this) - .addClass('customfile-input') //add class for CSS - .mouseover(function(){ upload.addClass('customfile-hover'); }) - .mouseout(function(){ upload.removeClass('customfile-hover'); }) - .focus(function(){ - upload.addClass('customfile-focus'); - fileInput.data('val', fileInput.val()); - }) - .blur(function(){ - upload.removeClass('customfile-focus'); - $(this).trigger('checkChange'); - }) - .bind('disable',function(){ - fileInput.attr('disabled',true); - upload.addClass('customfile-disabled'); - }) - .bind('enable',function(){ - fileInput.removeAttr('disabled'); - upload.removeClass('customfile-disabled'); - }) - .bind('checkChange', function(){ - if(fileInput.val() && fileInput.val() != fileInput.data('val')){ - fileInput.trigger('change'); - } - }) - .bind('change',function(){ - //get file name - var fileName = $(this).val().split(/\\/).pop(); - //get file extension - var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase(); - //update the feedback - uploadFeedback - .text(fileName) //set feedback text to filename - .removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class - .addClass(fileExt) //add file extension class - .data('fileExt', fileExt) //store file extension for class removal on next change - .addClass('customfile-feedback-populated'); //add class to show populated state - //change text of button - uploadButton.text('Change'); - }) - .click(function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback - fileInput.data('val', fileInput.val()); - setTimeout(function(){ - fileInput.trigger('checkChange'); - },100); - }); + $.fn.customFileInput = function(){ + //apply events and styles for file input element + var fileInput = $(this) + .addClass('customfile-input') //add class for CSS + .mouseover(function(){ upload.addClass('customfile-hover'); }) + .mouseout(function(){ upload.removeClass('customfile-hover'); }) + .focus(function(){ + upload.addClass('customfile-focus'); + fileInput.data('val', fileInput.val()); + }) + .blur(function(){ + upload.removeClass('customfile-focus'); + $(this).trigger('checkChange'); + }) + .bind('disable',function(){ + fileInput.attr('disabled',true); + upload.addClass('customfile-disabled'); + }) + .bind('enable',function(){ + fileInput.removeAttr('disabled'); + upload.removeClass('customfile-disabled'); + }) + .bind('checkChange', function(){ + if(fileInput.val() && fileInput.val() != fileInput.data('val')){ + fileInput.trigger('change'); + } + }) + .bind('change',function(){ + //get file name + var fileName = $(this).val().split(/\\/).pop(); + //get file extension + var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase(); + //update the feedback + uploadFeedback + .text(fileName) //set feedback text to filename + .removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class + .addClass(fileExt) //add file extension class + .data('fileExt', fileExt) //store file extension for class removal on next change + .addClass('customfile-feedback-populated'); //add class to show populated state + //change text of button + uploadButton.text('Change'); + }) + .click(function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback + fileInput.data('val', fileInput.val()); + setTimeout(function(){ + fileInput.trigger('checkChange'); + },100); + }); + + //create custom control container + var upload = $('
'); + //create custom control button + var uploadButton = $(' ').appendTo(upload); + //create custom control feedback + var uploadFeedback = $(' ').appendTo(upload); - //create custom control container - var upload = $(''); - //create custom control button - var uploadButton = $(' ').appendTo(upload); - //create custom control feedback - var uploadFeedback = $(' ').appendTo(upload); - - //match disabled state - if(fileInput.is('[disabled]')){ - fileInput.trigger('disable'); - } - - - //on mousemove, keep file input under the cursor to steal click - upload - .mousemove(function(e){ - fileInput.css({ - 'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X) - 'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3 - }); - }) - .insertAfter(fileInput); //insert after the input - - fileInput.appendTo(upload); - - //return jQuery - return $(this); -}; + //match disabled state + if(fileInput.is('[disabled]')){ + fileInput.trigger('disable'); + } + + + //on mousemove, keep file input under the cursor to steal click + upload + .mousemove(function(e){ + fileInput.css({ + 'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X) + 'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3 + }); + }) + .insertAfter(fileInput); //insert after the input + + fileInput.appendTo(upload); + + //return jQuery + return $(this); + }; })( jQuery );