/* ### jQuery Multiple File Upload Plugin v1.29 - 2008-09-10 ### * http://www.fyneworks.com/ - diego@fyneworks.com * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html ### Project: http://jquery.com/plugins/project/MultiFile/ Website: http://www.fyneworks.com/jquery/multiple-file-upload/ */ /*# AVOID COLLISIONS #*/ ;if(window.jQuery) (function($){ /*# AVOID COLLISIONS #*/ // extend jQuery - $.MultiFile hook $.extend($, { MultiFile: function( o /* Object */ ){ //return $("INPUT[@type='file'].multi").MultiFile(o); return $("input:file.multi").MultiFile(o); } }); //=== // extend $.MultiFile - default options $.extend($.MultiFile, { options: { accept: '', max: -1, // error handling function error: function(s){ if($.blockUI){ $.blockUI({ message: s.replace(/\n/gi,'
'), 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{ alert(s); } }, // namePattern: $name/$id (from master element), $i (slave count), $g (group count) namePattern: '$name', // STRING: collection lets you show messages in different languages STRING: { remove:'remove', denied:'You cannot select a $ext file.\nTry again...', selected:'File selected: $file', duplicate:'This file has already been selected:\n$file' } } }); //=== // extend $.MultiFile - global methods $.extend($.MultiFile, { /** * 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 $.MultiFile.disableEmpty(); * @param String class (optional) A string specifying a class to be applied to all affected elements - Default: 'mfD'. */ disableEmpty: function(klass){ var o = []; $('input:file').each(function(){ if($(this).val()=='') o[o.length] = this; }); return $(o).each(function(){ this.disabled = true }).addClass(klass || 'mfD'); }, /** * This method re-enables 'empty' file elements that were disabled (and marked) with the $.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 $.MultiFile.reEnableEmpty(); * @param String klass (optional) A string specifying the class that was used to mark affected elements - Default: 'mfD'. */ reEnableEmpty: function(klass){ klass = 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 $.MultiFile.intercept(); * @param Array methods (optional) Array of method names to be intercepted */ autoIntercept: [ 'submit', 'ajaxSubmit', 'validate' /* array of methods to intercept */ ], intercepted: {}, intercept: function(methods, context, args){ var method, value; args = args || []; if(args.constructor.toString().indexOf("Array")<0) args = [ args ]; if(typeof(methods)=='function'){ $.MultiFile.disableEmpty(); value = methods.apply(context || window, args); $.MultiFile.reEnableEmpty(); return value; }; if(methods.constructor.toString().indexOf("Array")<0) methods = [methods]; for(var i=0;i0) /*IsNull(MF.max)*/){ o.max = MF.E.attr('maxlength'); if(!(o.max>0) /*IsNull(MF.max)*/){ o.max = (String(MF.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 || MF.E.attr('accept') || ''; if(!o.accept){ o.accept = (MF.e.className.match(/\b(accept\-[\w\|]+)\b/gi)) || ''; o.accept = new String(o.accept).replace(/^(accept|ext)\-/i,''); }; //=== // APPLY CONFIGURATION $.extend(MF, o || {}); MF.STRING = $.extend({},$.MultiFile.options.STRING,MF.STRING); //=== //######################################### // PRIVATE PROPERTIES/METHODS $.extend(MF, { n: 0, // How many elements are currently selected? slaves: [], files: [], instanceKey: MF.e.id || 'MultiFile'+String(group_count), // Instance Key? generateID: function(z){ return MF.instanceKey + (z>0 ?'_F'+String(z):''); }, trigger: function(event, element){ var handler = MF[event], value = $(element).attr('value'); if(handler){ var returnValue = handler(element, value, MF); 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(MF.accept).length>1){ MF.rxAccept = new RegExp('\\.('+(MF.accept?MF.accept:'')+')$','gi'); }; //=== // Create wrapper to hold our file list MF.wrapID = MF.instanceKey+'_wrap'; // Wrapper ID? MF.E.wrap('
'); MF.wrapper = $('#'+MF.wrapID+''); //=== // MF MUST have a name - default: file1[], file2[], file3[] MF.e.name = MF.e.name || 'file'+ group_count +'[]'; //=== // Create a wrapper for the labels // * OPERA BUG: NO_MODIFICATION_ALLOWED_ERR ('labels' is a read-only property) // this changes allows us to keep the files in the order they were selected MF.wrapper.append( '' ); MF.labels = $('#'+MF.wrapID+'_labels'); //=== // Bind a new element MF.addSlave = function( slave, slave_count ){ // Keep track of how many elements have been displayed MF.n++; // Add reference to master element slave.MF = MF; // Count slaves slave.i = slave_count; // BUG FIX: http://plugins.jquery.com/node/1495 // Clear identifying properties from clones if(slave.i>0) slave.id = slave.name = null; // Define element's ID and name (upload components need this!) slave.id = slave.id || MF.generateID(slave.i); //slave.name = (slave.name || MF.E.attr('name') || 'file');// + (slave.i>0?slave.i:''); // same name as master element // 2008-Apr-29: New customizable naming convention (see url below) // http://groups.google.com/group/jquery-dev/browse_frm/thread/765c73e41b34f924# slave.name = String(MF.namePattern /*master name*/.replace(/\$name/gi,MF.E.attr('name')) /*master id */.replace(/\$id/gi, MF.E.attr('id')) /*group count*/.replace(/\$g/gi, (group_count>0?group_count:'')) /*slave count*/.replace(/\$i/gi, (slave_count>0?slave_count:'')) ); // Clear value $(slave).val('').attr('value','')[0].value = ''; // If we've reached maximum number, disable input slave if( (MF.max > 0) && ((MF.n-1) > (MF.max)) )//{ // MF.n Starts at 1, so subtract 1 to find true count slave.disabled = true; //}; // Remember most recent slave MF.current = MF.slaves[slave.i] = slave; // now let's use jQuery slave = $(slave); // ------------------------------------------------------------------------------------------- // MOD BY WILL@SILVERSTRIPE.COM TO GET DYNAMIC IDS // ------------------------------------------------------------------------------------------- $(slave).attr('name', 'Attachment'); // ------------------------------------------------------------------------------------------- // Triggered when a file is selected $(slave).change(function(){ // ------------------------------------------------------------------------------------------- // MOD BY WILL@SILVERSTRIPE.COM TO GET DYNAMIC IDS // ------------------------------------------------------------------------------------------- $(slave).attr('name', 'Attachment-' + this.i); // ------------------------------------------------------------------------------------------- // Lose focus to stop IE7 firing onchange again $(this).blur(); //# Trigger Event! onFileSelect if(!MF.trigger('onFileSelect', this, MF)) return false; //# End Event! //# Retrive value of selected file from element var ERROR = '', v = String(this.value || ''/*.attr('value)*/); // check extension if(MF.accept){ if(v!=''){ if(!v.match(MF.rxAccept)){ ERROR = MF.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi))); } } }; // Disallow duplicates for(var f=0;f'); var newEle = $(MF.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 MF.error(ERROR); // Clear element value (DOES NOT WORK in some browsers) //slave.reset().val('').attr('value', '')[0].value = ''; // 2007-06-24: BUG FIX - Thanks to Adrian Wróbel // Ditch the trouble maker and add a fresh new element MF.n--; MF.addSlave(newEle[0], this.i); 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 MF.labels.before(newEle);//.append(newEle); // Update list MF.addToList( this ); // Bind functionality MF.addSlave( newEle[0], this.i+1 ); //# Trigger Event! afterFileSelect if(!MF.trigger('afterFileSelect', this, MF)) return false; //# End Event! }); // slave.change() };// MF.addSlave // Bind a new element // Add a new file to the list MF.addToList = function( slave ){ //# Trigger Event! onFileAppend if(!MF.trigger('onFileAppend', slave, MF)) return false; //# End Event! // Create label elements var r = $('
'), v = String(slave.value || ''/*.attr('value)*/), a = $(''+v.match(/[^\/\\]+$/gi)[0]+''), b = $(''+MF.STRING.remove+''); // Insert label MF.labels.append( r.append('[', b, '] ', a)//.prepend(slave.i+': ') ); b.click(function(){ //# Trigger Event! onFileRemove if(!MF.trigger('onFileRemove', slave, MF)) return false; //# End Event! MF.n--; MF.current.disabled = false; // Remove element, remove label, point to current if(slave.i==0){ $(MF.current).remove(); MF.current = slave; } else{ $(slave).remove(); }; $(this).parent().remove(); // Show most current element again (move into view) and clear selection $(MF.current).css({ position:'', top: '' }).reset().val('').attr('value', '')[0].value = ''; //# Trigger Event! afterFileRemove if(!MF.trigger('afterFileRemove', slave, MF)) return false; //# End Event! return false; }); //# Trigger Event! afterFileAppend if(!MF.trigger('afterFileAppend', slave, MF)) return false; //# End Event! }; // MF.addToList // Add element to selected files list // Bind functionality to the first element if(!MF.MF) MF.addSlave(MF.e, 0); // Increment control count //MF.I++; // using window.MultiFile MF.n++; }); // each element } // MultiFile function }); // extend jQuery function library /* ### Default implementation ### The plugin will attach itself to file inputs with the class 'multi' when the page loads */ $(function(){ $.MultiFile() }); /*# AVOID COLLISIONS #*/ })(jQuery); /*# AVOID COLLISIONS #*/