www.pudn.com > multiple-file-upload.zip > jquery.MultiFile.js, change:2009-04-17,size:19974b


/* 
 ### 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.accept = MultiFile.accept.replace(/\W+/g,'|').replace(/^\W|\W$/g,''); 
        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 #*/