By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,141 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

Javascript file upload

P: 69
Hi,

I'm using the following code from
Expand|Select|Wrap|Line Numbers
  1. the-stickman.com
to create a file upload list in Javascript. I want to modify it so that the file element is only added if the user has provided a description for the file in a HTML form, but I'm not sure where I need to put the check in. Also it doesn't seem to work in Firefox, only IE, but I can't see what code is not compatible with IE.

Expand|Select|Wrap|Line Numbers
  1. function MultiSelector( list_target, max ){
  2.   42  
  3.   43      // Where to write the list
  4.   44      this.list_target = list_target;
  5.   45      // How many elements?
  6.   46      this.count = 0;
  7.   47      // How many elements?
  8.   48      this.id = 0;
  9.   49      // Is there a maximum?
  10.   50      if( max ){
  11.   51          this.max = max;
  12.   52      } else {
  13.   53          this.max = -1;
  14.   54      };
  15.   55  
  16.   56      /**
  17.   57       * Add a new file input element
  18.   58       */
  19.   59      this.addElement = function( element ){
  20.   60  
  21.   61          // Make sure it's a file input element
  22.   62          if( element.tagName == 'INPUT' && element.type == 'file' ){
  23.   63  
  24.   64              // Element name -- what number am I?
  25.   65  //            element.name = 'file_' + this.id++;
  26.   66              element.name = 'userfile[]';
  27.   67  
  28.   68              // Add reference to this object
  29.   69              element.multi_selector = this;
  30.   70  
  31.   71              // What to do when a file is selected
  32.   72              element.onchange = function(){
  33.   73  
  34.   74                  // New file input
  35.   75                  var new_element = document.createElement( 'input' );
  36.   76                  new_element.type = 'file';
  37.   77  
  38.   78                  // Add new element
  39.   79                  this.parentNode.insertBefore( new_element, this );
  40.   80  
  41.   81                  // Apply 'update' to element
  42.   82                  this.multi_selector.addElement( new_element );
  43.   83  
  44.   84                  // Update list
  45.   85                  this.multi_selector.addListRow( this );
  46.   86  
  47.   87                  // Hide this: we can't use display:none because Safari doesn't like it
  48.   88                  this.style.position = 'absolute';
  49.   89                  this.style.left = '-1000px';
  50.   90  
  51.   91              };
  52.   92              // If we've reached maximum number, disable input element
  53.   93              if( this.max != -1 && this.count >= this.max ){
  54.   94                  element.disabled = true;
  55.   95              };
  56.   96  
  57.   97              // File element counter
  58.   98              this.count++;
  59.   99              // Most recent element
  60.  100              this.current_element = element;
  61.  101  
  62.  102          } else {
  63.  103              // This can only be applied to file input elements!
  64.  104              alert( 'Error: not a file input element' );
  65.  105          };
  66.  106  
  67.  107      };
  68.  108  
  69.  109      /**
  70.  110       * Add a new row to the list of files
  71.  111       */
  72.  112      this.addListRow = function( element ){
  73.  113  
  74.  114          // Row div
  75.  115          var new_row = document.createElement( 'div' );
  76.  116  
  77.  117          // Delete button
  78.  118          var new_row_button = document.createElement( 'input' );
  79.  119          new_row_button.type = 'button';
  80.  120          new_row_button.value = 'Remove';
  81.  121  
  82.  122          // References
  83.  123          new_row.element = element;
  84.  124  
  85.  125          // Delete function
  86.  126          new_row_button.onclick= function(){
  87.  127  
  88.  128              // Remove element from form
  89.  129              this.parentNode.element.parentNode.removeChild( this.parentNode.element );
  90.  130  
  91.  131              // Remove this row from the list
  92.  132              this.parentNode.parentNode.removeChild( this.parentNode );
  93.  133  
  94.  134              // Decrement counter
  95.  135              this.parentNode.element.multi_selector.count--;
  96.  136  
  97.  137              // Re-enable input element (if it's disabled)
  98.  138              this.parentNode.element.multi_selector.current_element.disabled = false;
  99.  139  
  100.  140              // Appease Safari
  101.  141              //    without it Safari wants to reload the browser window
  102.  142              //    which nixes your already queued uploads
  103.  143              return false;
  104.  144          };
  105.  145  
  106.  146          // Set row value
  107.  147          new_row.innerHTML = element.value;
  108.  148  
  109.  149          // Add button
  110.  150          new_row.appendChild( new_row_button );
  111.  151  
  112.  152          // Add it to the list
  113.  153          this.list_target.appendChild( new_row );
  114.  154  
  115.  155      };
  116.  156  
  117.  157  };
  118.  
I would appreciate any help with sorting this out, it's really frustrating me.

Thanks,

Sean
Nov 27 '07 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Does the original code work with Firefox and other browsers?

What errors do you see?
Nov 28 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.