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

页面上有多个上传按钮：只有第一个有效

1 个答案: