페이지의 여러 업로드 버튼 : 첫 번째 버튼 만 작동

Question

한 페이지에 여러 개의 업로드 버튼이 있어야합니다.. 각 업로드 버튼은 항목 옆에 있으며 사용자는 특정 항목에 대한 이미지를 업로드 할 수 있습니다.

은 현재 페이지 의 상단에 첫 번째 업로드 버튼는를 작동 파일을 선택할 수 있습니다. 다른 것들은 작동하지 않습니다. : 클릭하면 아무 일도 일어나지 않습니다.

<div class="upload_icon" > 
    <form action="upload_extra.php" method="POST" enctype="multipart/form-data"> 
    <input id="upload" type="file" name="image" style="display:none" /> 
    <input name="postid" type="hidden" /> 
    <img id="upload_img" src="/images/uploadicon.png"> 
    </form> 
</div> 

<script type="text/javascript"> 
    $('#upload_img').click(function(){ 
    $('#upload').click(); 
    }); 
</script> 

이 동작을 수정하려면 어떻게해야합니까?

Answer 1

ID는 고유해야합니다. 동일한 ID를 가진 항목이 여러 개있을 때 jQuery는 첫 번째 항목 만 선택하므로 클릭 핸들러는 하나의 이미지에만 적용됩니다. ID 대신 클래스를 사용해보십시오.

<div class="upload_icon" > 
    <form action="upload_extra.php" method="POST" enctype="multipart/form-data"> 
    <input class="upload" type="file" name="image" style="display:none" /> 
    <input name="postid" type="hidden" /> 
    <img class="upload_img" src="/images/uploadicon.png"> 
    </form> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('.upload_img').click(function(){ 
      $(this).parent().find('.upload').click(); 
     }); 
    }); 
</script> 

Working Demo