title: Multiple File Upload with jQuery
body: <p>I am trying to allow multiple file uploads prior to a form post.  What I'd like is for the user to only ever see one file upload element, and each time a file is selected, show a new <code>&lt;li&gt;</code> that contains the filename and an image/link to remove that specific file from the collection.  There's a jQuery MultiFile plugin that does what I want, but I can't get the custom styling to work the way I want so I'm rolling my own.</p>
  
  <p>So far I have the below code.  It successfully adds the <code>&lt;li&gt;</code>, hides the file upload element with the newly selected file, and appends an empty file upload element to the page for the user to select a new file.  I'm struggling to appropriately manage the removal of elements and, while it's not that difficult, I've been staring at this long enough that now it just feels like I'm doing it all wrong.  I'm hoping others might have some insight, tips to clean this up (i.e. make it more elegant), and such.  Code below.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="product-image-area" class="group" style="border-bottom: none; padding-top: 0"&gt; 
      &lt;ul id="photos" class="nobull"&gt;    
       &lt;li id="no-product-images-msg" class="" &gt; 
              &lt;%= Html.Image("no-photos.png") %&gt; 
       &lt;/li&gt; 
     &lt;/ul&gt;
   &lt;/div&gt; 
   &lt;div id="upload-area"&gt; 
      &lt;h4 class="st"&gt;Upload an image&lt;/h4&gt;
      &lt;p class="note"&gt;Allowed file types are .gif, .jpg, .jpeg, and .png&lt;/p&gt; 
      &lt;p id="file-input" class="st sb"&gt;&lt;input class="photo-upload" id="VenuePhotos_0" name="VenuePhotos[]" type="file" /&gt;&lt;/p&gt; 
   &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>$(function () {
       $('.photo-upload').live('change', function () {
           var fileCount = new Number($(this).parent().children('.photo-upload').length);
           $('#photos').append('&lt;li id="venue_photo_' + (fileCount - 1) + '"&gt;' + $(this).val() + '&lt;img title="' + (fileCount - 1) + '" src="/vh/public/images/icon-delete.png" class="delete"  /&gt;&lt;/li&gt;');
           $(this).parent().append(
               $(this).clone().attr('id', 'VenuePhotos_' + fileCount)
           );
           $(this).hide();
       });
       $('.delete').live('click', function (e) {
           var index = $(e).attr('title');
           $('#file-input').children('.photo-upload').remove('#VenuePhotos_' + index);
           $('#photos').children().remove('#venue_photo_' + index);
       });
  });
  </code></pre>