使用jQuery多文件上傳

Question

我試圖在表單帖子之前允許多個文件上傳。我希望用戶只能看到一個文件上傳元素，並且每次選擇一個文件時，都會顯示一個新的<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的包裝（用於在父函數中獲得的兩個元素必須被刪除）。