使用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的包装（用于在父函数中获得的两个元素必须被删除）。