43 |
44 |
45 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/js/example.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 | $('#file').customFileInput();
3 | });
--------------------------------------------------------------------------------
/js/jQuery.fileinput.js:
--------------------------------------------------------------------------------
1 | /**
2 | * --------------------------------------------------------------------
3 | * jQuery customfileinput plugin
4 | * Author: Scott Jehl, scott@filamentgroup.com
5 | * Copyright (c) 2009 Filament Group
6 | * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
7 | * --------------------------------------------------------------------
8 | */
9 | (function( $ ){
10 | $.fn.customFileInput = function(){
11 | //apply events and styles for file input element
12 | var fileInput = $(this)
13 | .addClass('customfile-input') //add class for CSS
14 | .mouseover(function(){ upload.addClass('customfile-hover'); })
15 | .mouseout(function(){ upload.removeClass('customfile-hover'); })
16 | .focus(function(){
17 | upload.addClass('customfile-focus');
18 | fileInput.data('val', fileInput.val());
19 | })
20 | .blur(function(){
21 | upload.removeClass('customfile-focus');
22 | $(this).trigger('checkChange');
23 | })
24 | .bind('disable',function(){
25 | fileInput.attr('disabled',true);
26 | upload.addClass('customfile-disabled');
27 | })
28 | .bind('enable',function(){
29 | fileInput.removeAttr('disabled');
30 | upload.removeClass('customfile-disabled');
31 | })
32 | .bind('checkChange', function(){
33 | if(fileInput.val() && fileInput.val() != fileInput.data('val')){
34 | fileInput.trigger('change');
35 | }
36 | })
37 | .bind('change',function(){
38 | //get file name
39 | var fileName = $(this).val().split(/\\/).pop();
40 | //get file extension
41 | var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
42 | //update the feedback
43 | uploadFeedback
44 | .text(fileName) //set feedback text to filename
45 | .removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
46 | .addClass(fileExt) //add file extension class
47 | .data('fileExt', fileExt) //store file extension for class removal on next change
48 | .addClass('customfile-feedback-populated'); //add class to show populated state
49 | //change text of button
50 | uploadButton.text('Change');
51 | })
52 | .click(function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
53 | fileInput.data('val', fileInput.val());
54 | setTimeout(function(){
55 | fileInput.trigger('checkChange');
56 | },100);
57 | });
58 |
59 | //create custom control container
60 | var upload = $('');
61 | //create custom control button
62 | var uploadButton = $('Browse').appendTo(upload);
63 | //create custom control feedback
64 | var uploadFeedback = $('No file selected...').appendTo(upload);
65 |
66 | //match disabled state
67 | if(fileInput.is('[disabled]')){
68 | fileInput.trigger('disable');
69 | }
70 |
71 |
72 | //on mousemove, keep file input under the cursor to steal click
73 | upload
74 | .mousemove(function(e){
75 | fileInput.css({
76 | 'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X)
77 | 'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3
78 | });
79 | })
80 | .insertAfter(fileInput); //insert after the input
81 |
82 | fileInput.appendTo(upload);
83 |
84 | //return jQuery
85 | return $(this);
86 | };
87 | })( jQuery );
88 |
--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2010 Filament Group, Inc
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------