jquery.multifile.js - Handle API methods Perform API method…

/demo/yii/web/js/source/jquery.multifile.js

https://bitbucket.org/sakhalin/yii-bootstrap · JavaScript · 536 lines · 218 code · 96 blank · 222 comment · 58 complexity · 778f6254c4210c2479548d9c1ee5339f MD5 · raw file

/*

 ### jQuery Multiple File Upload Plugin v1.47 - 2010-03-26 ###

 * 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 = (typeof(klass)=='string'?klass:'')||'mfD';

   var o = [];

   $('input:file.MultiFile').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 = (typeof(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);

				//SEE-http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27

				setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);

    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);

						//SEE-http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27

      setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);

      return value;

     }; // interception

    })(method); // MAKE SURE THAT method IS ISOLATED for the interception

   };// for each method

  } // $.fn.MultiFile.intercept

		

 });

	

	/*--------------------------------------------------------*/

	

	/*

		### 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', 'ajaxForm', 'validate', 'valid' /* 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 #*/