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

대답은 폐쇄, 자바 스크립트의 가장 강력한 기능 중 하나입니다. 다른 내부에있는 함수 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와 래퍼에 액세스 제거되어야하는 두 요소)를 부모 함수에서 가져 왔습니다.