0

我需要在一页上有几个上传按钮。每个上传按钮都在一个项目旁边，用户将能够上传该特定项目的图像。

现在，只有页面顶部的第一个上传按钮有效并允许选择文件。其他的不起作用：单击时没有任何反应。

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

我应该怎么做才能解决这种行为？

4

1 回答 1

3

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>

工作演示

于 2013-07-10T19:15:23.697 回答