Tải lên nhiều tệp với jQuery

Question

Tôi đang cố gắng cho phép tải lên nhiều tệp trước một bài đăng biểu mẫu. Điều tôi muốn là người dùng chỉ thấy một phần tử tải lên tệp và mỗi lần tệp được chọn, hiển thị <li> mới chứa tên tệp và hình ảnh/liên kết để xóa tệp cụ thể đó khỏi bộ sưu tập. Có một plugin jQuery MultiFile làm những gì tôi muốn, nhưng tôi không thể có được phong cách tùy chỉnh để làm việc theo cách tôi muốn vì vậy tôi đang lăn của riêng tôi.

Cho đến nay tôi có mã bên dưới. Nó thêm thành công <li>, ẩn phần tử tải tệp lên với tệp mới được chọn và thêm phần tử tải lên tệp trống vào trang để người dùng chọn tệp mới. Tôi đang đấu tranh để quản lý một cách thích hợp việc loại bỏ các yếu tố và, trong khi nó không phải là khó khăn, tôi đã nhìn chằm chằm vào điều này đủ dài mà bây giờ nó chỉ cảm thấy như tôi đang làm tất cả sai. Tôi hy vọng những người khác có thể có một số thông tin chi tiết, mẹo để làm sạch điều này (ví dụ: làm cho nó thanh lịch hơn), và như vậy. Mã dưới đây.

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> 

Script:

$(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

Câu trả lời là đóng cửa, một trong những tính năng mạnh mẽ nhất của JavaScript. Các hàm nằm bên trong các hàm khác are able to access the variables of the enclosing functions.

Bạn có thể ràng buộc chức năng xóa của bạn khi một đầu vào tập tin được thêm vào thay vì sử dụng .live và tạo động 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(); 
    }); 
}); 

Trong ví dụ này, xử lý click cho nút delete truy cập vào giấy gói jQuery (đối với hai phần tử phải được loại bỏ) được lấy trong hàm cha.