This repository has been archived by the owner on Aug 31, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2afccb5
commit 27dfbe7
Showing
1 changed file
with
77 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,86 +2,86 @@ | |
* -------------------------------------------------------------------- | ||
* jQuery customfileinput plugin | ||
* Author: Scott Jehl, [email protected] | ||
* 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 = $('<div class="customfile"></div>'); | ||
//create custom control button | ||
var uploadButton = $('<span class="customfile-button" aria-hidden="true">Browse</span>').appendTo(upload); | ||
//create custom control feedback | ||
var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">No file selected...</span>').appendTo(upload); | ||
|
||
//create custom control container | ||
var upload = $('<div class="customfile"></div>'); | ||
//create custom control button | ||
var uploadButton = $('<span class="customfile-button" aria-hidden="true">Browse</span>').appendTo(upload); | ||
//create custom control feedback | ||
var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">No file selected...</span>').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 ); |