javascript - 页面 : only the first one works 上有多个上传按钮

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