| /* | |
| ### jQuery Multiple File Upload Plugin v1.44 - 2009-04-08 ### | |
| * Home: http://www.fyneworks.com/jquery/multiple-file-upload/ | |
| * Code: http://code.google.com/p/jquery-multifile-plugin/ | |
| * | |
| * Dual licensed under the MIT and GPL licenses: | |
| * http://www.opensource.org/licenses/mit-license.php | |
| * http://www.gnu.org/licenses/gpl.html | |
| ### | |
| */ | |
| /*# AVOID COLLISIONS #*/ | |
| ;if(window.jQuery) (function($){ | |
| /*# AVOID COLLISIONS #*/ | |
| // plugin initialization | |
| $.fn.MultiFile = function(options){ | |
| if(this.length==0) return this; // quick fail | |
| // Handle API methods | |
| if(typeof arguments[0]=='string'){ | |
| // Perform API methods on individual elements | |
| if(this.length>1){ | |
| var args = arguments; | |
| return this.each(function(){ | |
| $.fn.MultiFile.apply($(this), args); | |
| }); | |
| }; | |
| // Invoke API method handler | |
| $.fn.MultiFile[arguments[0]].apply(this, $.makeArray(arguments).slice(1) || []); | |
| // Quick exit... | |
| return this; | |
| }; | |
| // Initialize options for this call | |
| var options = $.extend( | |
| {}/* new object */, | |
| $.fn.MultiFile.options/* default options */, | |
| options || {} /* just-in-time options */ | |
| ); | |
| // Empty Element Fix!!! | |
| // this code will automatically intercept native form submissions | |
| // and disable empty file elements | |
| $('form') | |
| .not('MultiFile-intercepted') | |
| .addClass('MultiFile-intercepted') | |
| .submit($.fn.MultiFile.disableEmpty); | |
| //### http://plugins.jquery.com/node/1363 | |
| // utility method to integrate this plugin with others... | |
| if($.fn.MultiFile.options.autoIntercept){ | |
| $.fn.MultiFile.intercept( $.fn.MultiFile.options.autoIntercept /* array of methods to intercept */ ); | |
| $.fn.MultiFile.options.autoIntercept = null; /* only run this once */ | |
| }; | |
| // loop through each matched element | |
| this | |
| .not('.MultiFile-applied') | |
| .addClass('MultiFile-applied') | |
| .each(function(){ | |
| //##################################################################### | |
| // MAIN PLUGIN FUNCTIONALITY - START | |
| //##################################################################### | |
| // BUG 1251 FIX: http://plugins.jquery.com/project/comments/add/1251 | |
| // variable group_count would repeat itself on multiple calls to the plugin. | |
| // this would cause a conflict with multiple elements | |
| // changes scope of variable to global so id will be unique over n calls | |
| window.MultiFile = (window.MultiFile || 0) + 1; | |
| var group_count = window.MultiFile; | |
| // Copy parent attributes - Thanks to Jonas Wagner | |
| // we will use this one to create new input elements | |
| var MultiFile = {e:this, E:$(this), clone:$(this).clone()}; | |
| //=== | |
| //# USE CONFIGURATION | |
| if(typeof options=='number') options = {max:options}; | |
| var o = $.extend({}, | |
| $.fn.MultiFile.options, | |
| options || {}, | |
| ($.metadata? MultiFile.E.metadata(): ($.meta?MultiFile.E.data():null)) || {}, /* metadata options */ | |
| {} /* internals */ | |
| ); | |
| // limit number of files that can be selected? | |
| if(!(o.max>0) /*IsNull(MultiFile.max)*/){ | |
| o.max = MultiFile.E.attr('maxlength'); | |
| if(!(o.max>0) /*IsNull(MultiFile.max)*/){ | |
| o.max = (String(MultiFile.e.className.match(/\b(max|limit)\-([0-9]+)\b/gi) || ['']).match(/[0-9]+/gi) || [''])[0]; | |
| if(!(o.max>0)) o.max = -1; | |
| else o.max = String(o.max).match(/[0-9]+/gi)[0]; | |
| } | |
| }; | |
| o.max = new Number(o.max); | |
| // limit extensions? | |
| o.accept = o.accept || MultiFile.E.attr('accept') || ''; | |
| if(!o.accept){ | |
| o.accept = (MultiFile.e.className.match(/\b(accept\-[\w\|]+)\b/gi)) || ''; | |
| o.accept = new String(o.accept).replace(/^(accept|ext)\-/i,''); | |
| }; | |
| //=== | |
| // APPLY CONFIGURATION | |
| $.extend(MultiFile, o || {}); | |
| MultiFile.STRING = $.extend({},$.fn.MultiFile.options.STRING,MultiFile.STRING); | |
| //=== | |
| //######################################### | |
| // PRIVATE PROPERTIES/METHODS | |
| $.extend(MultiFile, { | |
| n: 0, // How many elements are currently selected? | |
| slaves: [], files: [], | |
| instanceKey: MultiFile.e.id || 'MultiFile'+String(group_count), // Instance Key? | |
| generateID: function(z){ return MultiFile.instanceKey + (z>0 ?'_F'+String(z):''); }, | |
| trigger: function(event, element){ | |
| var handler = MultiFile[event], value = $(element).attr('value'); | |
| if(handler){ | |
| var returnValue = handler(element, value, MultiFile); | |
| if( returnValue!=null ) return returnValue; | |
| } | |
| return true; | |
| } | |
| }); | |
| //=== | |
| // Setup dynamic regular expression for extension validation | |
| // - thanks to John-Paul Bader: http://smyck.de/2006/08/11/javascript-dynamic-regular-expresions/ | |
| if(String(MultiFile.accept).length>1){ | |
| MultiFile.rxAccept = new RegExp('\\.('+(MultiFile.accept?MultiFile.accept:'')+')$','gi'); | |
| }; | |
| //=== | |
| // Create wrapper to hold our file list | |
| MultiFile.wrapID = MultiFile.instanceKey+'_wrap'; // Wrapper ID? | |
| MultiFile.E.wrap('<div class="MultiFile-wrap" id="'+MultiFile.wrapID+'"></div>'); | |
| MultiFile.wrapper = $('#'+MultiFile.wrapID+''); | |
| //=== | |
| // MultiFile MUST have a name - default: file1[], file2[], file3[] | |
| MultiFile.e.name = MultiFile.e.name || 'file'+ group_count +'[]'; | |
| //=== | |
| if(!MultiFile.list){ | |
| // Create a wrapper for the list | |
| // * OPERA BUG: NO_MODIFICATION_ALLOWED_ERR ('list' is a read-only property) | |
| // this change allows us to keep the files in the order they were selected | |
| MultiFile.wrapper.append( '<div class="MultiFile-list" id="'+MultiFile.wrapID+'_list"></div>' ); | |
| MultiFile.list = $('#'+MultiFile.wrapID+'_list'); | |
| }; | |
| MultiFile.list = $(MultiFile.list); | |
| //=== | |
| // Bind a new element | |
| MultiFile.addSlave = function( slave, slave_count ){ | |
| //if(window.console) console.log('MultiFile.addSlave',slave_count); | |
| // Keep track of how many elements have been displayed | |
| MultiFile.n++; | |
| // Add reference to master element | |
| slave.MultiFile = MultiFile; | |
| // BUG FIX: http://plugins.jquery.com/node/1495 | |
| // Clear identifying properties from clones | |
| if(slave_count>0) slave.id = slave.name = ''; | |
| // Define element's ID and name (upload components need this!) | |
| //slave.id = slave.id || MultiFile.generateID(slave_count); | |
| if(slave_count>0) slave.id = MultiFile.generateID(slave_count); | |
| //FIX for: http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=23 | |
| // 2008-Apr-29: New customizable naming convention (see url below) | |
| // http://groups.google.com/group/jquery-dev/browse_frm/thread/765c73e41b34f924# | |
| slave.name = String(MultiFile.namePattern | |
| /*master name*/.replace(/\$name/gi,$(MultiFile.clone).attr('name')) | |
| /*master id */.replace(/\$id/gi, $(MultiFile.clone).attr('id')) | |
| /*group count*/.replace(/\$g/gi, group_count)//(group_count>0?group_count:'')) | |
| /*slave count*/.replace(/\$i/gi, slave_count)//(slave_count>0?slave_count:'')) | |
| ); | |
| // If we've reached maximum number, disable input slave | |
| if( (MultiFile.max > 0) && ((MultiFile.n-1) > (MultiFile.max)) )//{ // MultiFile.n Starts at 1, so subtract 1 to find true count | |
| slave.disabled = true; | |
| //}; | |
| // Remember most recent slave | |
| MultiFile.current = MultiFile.slaves[slave_count] = slave; | |
| // We'll use jQuery from now on | |
| slave = $(slave); | |
| // Clear value | |
| slave.val('').attr('value','')[0].value = ''; | |
| // Stop plugin initializing on slaves | |
| slave.addClass('MultiFile-applied'); | |
| // Triggered when a file is selected | |
| slave.change(function(){ | |
| //if(window.console) console.log('MultiFile.slave.change',slave_count); | |
| // Lose focus to stop IE7 firing onchange again | |
| $(this).blur(); | |
| //# Trigger Event! onFileSelect | |
| if(!MultiFile.trigger('onFileSelect', this, MultiFile)) return false; | |
| //# End Event! | |
| //# Retrive value of selected file from element | |
| var ERROR = '', v = String(this.value || ''/*.attr('value)*/); | |
| // check extension | |
| if(MultiFile.accept && v && !v.match(MultiFile.rxAccept))//{ | |
| ERROR = MultiFile.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi))); | |
| //} | |
| //}; | |
| // Disallow duplicates | |
| for(var f in MultiFile.slaves)//{ | |
| if(MultiFile.slaves[f] && MultiFile.slaves[f]!=this)//{ | |
| //console.log(MultiFile.slaves[f],MultiFile.slaves[f].value); | |
| if(MultiFile.slaves[f].value==v)//{ | |
| ERROR = MultiFile.STRING.duplicate.replace('$file', v.match(/[^\/\\]+$/gi)); | |
| //}; | |
| //}; | |
| //}; | |
| // Create a new file input element | |
| var newEle = $(MultiFile.clone).clone();// Copy parent attributes - Thanks to Jonas Wagner | |
| //# Let's remember which input we've generated so | |
| // we can disable the empty ones before submission | |
| // See: http://plugins.jquery.com/node/1495 | |
| newEle.addClass('MultiFile'); | |
| // Handle error | |
| if(ERROR!=''){ | |
| // Handle error | |
| MultiFile.error(ERROR); | |
| // 2007-06-24: BUG FIX - Thanks to Adrian Wróbel <adrian [dot] wrobel [at] gmail.com> | |
| // Ditch the trouble maker and add a fresh new element | |
| MultiFile.n--; | |
| MultiFile.addSlave(newEle[0], slave_count); | |
| slave.parent().prepend(newEle); | |
| slave.remove(); | |
| return false; | |
| }; | |
| // Hide this element (NB: display:none is evil!) | |
| $(this).css({ position:'absolute', top: '-3000px' }); | |
| // Add new element to the form | |
| slave.after(newEle); | |
| // Update list | |
| MultiFile.addToList( this, slave_count ); | |
| // Bind functionality | |
| MultiFile.addSlave( newEle[0], slave_count+1 ); | |
| //# Trigger Event! afterFileSelect | |
| if(!MultiFile.trigger('afterFileSelect', this, MultiFile)) return false; | |
| //# End Event! | |
| }); // slave.change() | |
| // Save control to element | |
| $(slave).data('MultiFile', MultiFile); | |
| };// MultiFile.addSlave | |
| // Bind a new element | |
| // Add a new file to the list | |
| MultiFile.addToList = function( slave, slave_count ){ | |
| //if(window.console) console.log('MultiFile.addToList',slave_count); | |
| //# Trigger Event! onFileAppend | |
| if(!MultiFile.trigger('onFileAppend', slave, MultiFile)) return false; | |
| //# End Event! | |
| // Create label elements | |
| var | |
| r = $('<div class="MultiFile-label"></div>'), | |
| v = String(slave.value || ''/*.attr('value)*/), | |
| a = $('<span class="MultiFile-title" title="'+MultiFile.STRING.selected.replace('$file', v)+'">'+MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0])+'</span>'), | |
| b = $('<a class="MultiFile-remove" href="#'+MultiFile.wrapID+'">'+MultiFile.STRING.remove+'</a>'); | |
| // Insert label | |
| MultiFile.list.append( | |
| r.append(b, ' ', a) | |
| ); | |
| b | |
| .click(function(){ | |
| //# Trigger Event! onFileRemove | |
| if(!MultiFile.trigger('onFileRemove', slave, MultiFile)) return false; | |
| //# End Event! | |
| MultiFile.n--; | |
| MultiFile.current.disabled = false; | |
| // Remove element, remove label, point to current | |
| MultiFile.slaves[slave_count] = null; | |
| $(slave).remove(); | |
| $(this).parent().remove(); | |
| // Show most current element again (move into view) and clear selection | |
| $(MultiFile.current).css({ position:'', top: '' }); | |
| $(MultiFile.current).reset().val('').attr('value', '')[0].value = ''; | |
| //# Trigger Event! afterFileRemove | |
| if(!MultiFile.trigger('afterFileRemove', slave, MultiFile)) return false; | |
| //# End Event! | |
| return false; | |
| }); | |
| //# Trigger Event! afterFileAppend | |
| if(!MultiFile.trigger('afterFileAppend', slave, MultiFile)) return false; | |
| //# End Event! | |
| }; // MultiFile.addToList | |
| // Add element to selected files list | |
| // Bind functionality to the first element | |
| if(!MultiFile.MultiFile) MultiFile.addSlave(MultiFile.e, 0); | |
| // Increment control count | |
| //MultiFile.I++; // using window.MultiFile | |
| MultiFile.n++; | |
| // Save control to element | |
| MultiFile.E.data('MultiFile', MultiFile); | |
| //##################################################################### | |
| // MAIN PLUGIN FUNCTIONALITY - END | |
| //##################################################################### | |
| }); // each element | |
| }; | |
| /*--------------------------------------------------------*/ | |
| /* | |
| ### Core functionality and API ### | |
| */ | |
| $.extend($.fn.MultiFile, { | |
| /** | |
| * This method removes all selected files | |
| * | |
| * Returns a jQuery collection of all affected elements. | |
| * | |
| * @name reset | |
| * @type jQuery | |
| * @cat Plugins/MultiFile | |
| * @author Diego A. (http://www.fyneworks.com/) | |
| * | |
| * @example $.fn.MultiFile.reset(); | |
| */ | |
| reset: function(){ | |
| var settings = $(this).data('MultiFile'); | |
| //if(settings) settings.wrapper.find('a.MultiFile-remove').click(); | |
| if(settings) settings.list.find('a.MultiFile-remove').click(); | |
| return $(this); | |
| }, | |
| /** | |
| * This utility makes it easy to disable all 'empty' file elements in the document before submitting a form. | |
| * It marks the affected elements so they can be easily re-enabled after the form submission or validation. | |
| * | |
| * Returns a jQuery collection of all affected elements. | |
| * | |
| * @name disableEmpty | |
| * @type jQuery | |
| * @cat Plugins/MultiFile | |
| * @author Diego A. (http://www.fyneworks.com/) | |
| * | |
| * @example $.fn.MultiFile.disableEmpty(); | |
| * @param String class (optional) A string specifying a class to be applied to all affected elements - Default: 'mfD'. | |
| */ | |
| disableEmpty: function(klass){ klass = String(klass || 'mfD'); | |
| var o = []; | |
| $('input:file').each(function(){ if($(this).val()=='') o[o.length] = this; }); | |
| return $(o).each(function(){ this.disabled = true }).addClass(klass); | |
| }, | |
| /** | |
| * This method re-enables 'empty' file elements that were disabled (and marked) with the $.fn.MultiFile.disableEmpty method. | |
| * | |
| * Returns a jQuery collection of all affected elements. | |
| * | |
| * @name reEnableEmpty | |
| * @type jQuery | |
| * @cat Plugins/MultiFile | |
| * @author Diego A. (http://www.fyneworks.com/) | |
| * | |
| * @example $.fn.MultiFile.reEnableEmpty(); | |
| * @param String klass (optional) A string specifying the class that was used to mark affected elements - Default: 'mfD'. | |
| */ | |
| reEnableEmpty: function(klass){ klass = String(klass || 'mfD'); | |
| return $('input:file.'+klass).removeClass(klass).each(function(){ this.disabled = false }); | |
| }, | |
| /** | |
| * This method will intercept other jQuery plugins and disable empty file input elements prior to form submission | |
| * | |
| * @name intercept | |
| * @cat Plugins/MultiFile | |
| * @author Diego A. (http://www.fyneworks.com/) | |
| * | |
| * @example $.fn.MultiFile.intercept(); | |
| * @param Array methods (optional) Array of method names to be intercepted | |
| */ | |
| intercepted: {}, | |
| intercept: function(methods, context, args){ | |
| var method, value; args = args || []; | |
| if(args.constructor.toString().indexOf("Array")<0) args = [ args ]; | |
| if(typeof(methods)=='function'){ | |
| $.fn.MultiFile.disableEmpty(); | |
| value = methods.apply(context || window, args); | |
| $.fn.MultiFile.reEnableEmpty(); | |
| return value; | |
| }; | |
| if(methods.constructor.toString().indexOf("Array")<0) methods = [methods]; | |
| for(var i=0;i<methods.length;i++){ | |
| method = methods[i]+''; // make sure that we have a STRING | |
| if(method) (function(method){ // make sure that method is ISOLATED for the interception | |
| $.fn.MultiFile.intercepted[method] = $.fn[method] || function(){}; | |
| $.fn[method] = function(){ | |
| $.fn.MultiFile.disableEmpty(); | |
| value = $.fn.MultiFile.intercepted[method].apply(this, arguments); | |
| $.fn.MultiFile.reEnableEmpty(); | |
| return value; | |
| }; // interception | |
| })(method); // MAKE SURE THAT method IS ISOLATED for the interception | |
| };// for each method | |
| } | |
| }); | |
| /*--------------------------------------------------------*/ | |
| /* | |
| ### Default Settings ### | |
| eg.: You can override default control like this: | |
| $.fn.MultiFile.options.accept = 'gif|jpg'; | |
| */ | |
| $.fn.MultiFile.options = { //$.extend($.fn.MultiFile, { options: { | |
| accept: '', // accepted file extensions | |
| max: -1, // maximum number of selectable files | |
| // name to use for newly created elements | |
| namePattern: '$name', // same name by default (which creates an array) | |
| // STRING: collection lets you show messages in different languages | |
| STRING: { | |
| remove:'x', | |
| denied:'You cannot select a $ext file.\nTry again...', | |
| file:'$file', | |
| selected:'File selected: $file', | |
| duplicate:'This file has already been selected:\n$file' | |
| }, | |
| // name of methods that should be automcatically intercepted so the plugin can disable | |
| // extra file elements that are empty before execution and automatically re-enable them afterwards | |
| autoIntercept: [ 'submit', 'ajaxSubmit', 'validate' /* array of methods to intercept */ ], | |
| // error handling function | |
| error: function(s){ | |
| /* | |
| ERROR! blockUI is not currently working in IE | |
| if($.blockUI){ | |
| $.blockUI({ | |
| message: s.replace(/\n/gi,'<br/>'), | |
| css: { | |
| border:'none', padding:'15px', size:'12.0pt', | |
| backgroundColor:'#900', color:'#fff', | |
| opacity:'.8','-webkit-border-radius': '10px','-moz-border-radius': '10px' | |
| } | |
| }); | |
| window.setTimeout($.unblockUI, 2000); | |
| } | |
| else//{// save a byte! | |
| */ | |
| alert(s); | |
| //}// save a byte! | |
| } | |
| }; //} }); | |
| /*--------------------------------------------------------*/ | |
| /* | |
| ### Additional Methods ### | |
| Required functionality outside the plugin's scope | |
| */ | |
| // Native input reset method - because this alone doesn't always work: $(element).val('').attr('value', '')[0].value = ''; | |
| $.fn.reset = function(){ return this.each(function(){ try{ this.reset(); }catch(e){} }); }; | |
| /*--------------------------------------------------------*/ | |
| /* | |
| ### Default implementation ### | |
| The plugin will attach itself to file inputs | |
| with the class 'multi' when the page loads | |
| */ | |
| $(function(){ | |
| //$("input:file.multi").MultiFile(); | |
| $("input[type=file].multi").MultiFile(); | |
| }); | |
| /*# AVOID COLLISIONS #*/ | |
| })(jQuery); | |
| /*# AVOID COLLISIONS #*/ |