複数のファイルをjQueryでアップロード

Question

私は、フォームの投稿の前に複数のファイルのアップロードを許可しようとしています。私が望むのは、ユーザーが1つのファイルアップロード要素のみを表示し、ファイルが選択されるたびに、ファイル名を含む新しい<li>と、その特定のファイルをコレクションから削除するイメージ/リンクを表示することです。私が望むことをするjQuery MultiFileプラグインがありますが、私が自分のものを使いたいので、私が望むやり方で動作するカスタムスタイリングを手に入れることはできません。

これまでのところ、私は以下のコードを持っています。 <li>が正常に追加され、ファイルアップロード要素が新しく選択されたファイルに隠され、新しいファイルを選択するための空のファイルアップロード要素がページに追加されます。私は要素の除去を適切に管理するのには苦労しています。それほど難しいことではありませんが、私はこれを十分に凝視しています。私は、他の人がいくつかの洞察力を持っていること、これをきれいにする（つまりよりエレガントにする）ためのヒントなどを期待しています。以下のコード。

HTML：

<div id="product-image-area" class="group" style="border-bottom: none; padding-top: 0"> 
    <ul id="photos" class="nobull">  
    <li id="no-product-images-msg" class="" > 
      <%= Html.Image("no-photos.png") %> 
    </li> 
    </ul> 
</div> 
<div id="upload-area"> 
    <h4 class="st">Upload an image</h4> 
    <p class="note">Allowed file types are .gif, .jpg, .jpeg, and .png</p> 
    <p id="file-input" class="st sb"><input class="photo-upload" id="VenuePhotos_0" name="VenuePhotos[]" type="file" /></p> 
</div> 

スクリプト：

$(function() { 
    $('.photo-upload').live('change', function() { 
     var fileCount = new Number($(this).parent().children('.photo-upload').length); 
     $('#photos').append('<li id="venue_photo_' + (fileCount - 1) + '">' + $(this).val() + '<img title="' + (fileCount - 1) + '" src="/vh/public/images/icon-delete.png" class="delete" /></li>'); 
     $(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); 
    }); 
}); 

Answer 1

答えは閉鎖は、JavaScriptの最も強力な機能の一つです。他の内部にある関数are able to access the variables of the enclosing functions。

ファイル入力ではなく.liveを使用しての追加と、動的にIDの生成されたときにあなたがあなたの削除機能をバインドすることができます。この例では

$('.photo-upload').live('change', function() { 
    var li = $('<li />').text($(this).val()), 
     img = $('<img src="/vh/public/images/icon-delete.png" class="delete" />'), 
     input = $(this).clone(); 

    li.append(img); 
    $('#photos').append(li); 
    $(this).parent().append(input); 
    $(this).hide(); 

    img.click(function() { 
     input.remove(); 
     li.remove(); 
    }); 
}); 

を、削除ボタン用clickハンドラがために（jQueryのラッパーにアクセス2つの要素は削除する必要があります）。