Question

这是我的代码：

<script type="text/javascript">    
 $(function(){
   var btnUpload=$('#browse');
   var adinfoid=$('#adinfoid').val();

   new AjaxUpload(btnUpload, {
     action: '<?php echo base_url()?>index.php/post/upload_editmainimage/'+adinfoid,
     name: 'uploadfile',
     onSubmit: function(file, ext){
       if (! (ext && /^(jpg|png|jpeg|gif|JPG|PNG|JPEG|GIF)$/.test(ext))){
         $("#mainphotoerror").html('Only JPG, PNG, GIF, files are allowed');
         $("#mainphotoerror").css('display','block');
         return false;
       }        
     },
     onComplete: function(file, response){
       //alert(response);
       if(response){
         alert('success');
       }else{
         alert("error");
       }
     }
   });  
 });    
</script>

HTML PART

<table width="200" border="1">
  <?php 
   for($i=0;$i<20;i++){
  ?>
  <tr>
    <td>Add Photo <?php echo $i;?></td>
    <td>
      <input type="button" 
             id="browse<?php echo $i;?>" 
             class="browse_media" 
             value="Browse">
    </td>
  </tr>
  <?php
   }
  ?>
</table>

当我点击第一个浏览按钮时，会显示文件打开窗口，但是从第2个到最后，没有显示用于选择图像的打开窗口。

我的代码中的问题在哪里？

我已经为ajax上传加载了.js文件？

如何使用ajax从多个文件浏览器按钮上传图像？

Answer 1

你应该知道HTML上的id标签，它必须是唯一的IDentifier

试试这个：

var btnUploads=$('input.browse_media');
var adinfoid=$('#adinfoid').val();
new AjaxUpload(btnUploads, {

并在php中

<td><input type="button" id="browse<?php echo $i?>" class="browse_media" value="Browse"></td>

Answer 2

对于多个文件上传，请使用Jquery插件uploadify（）查看演示链接：http://www.uploadify.com/demos/

Answer 3

as Sergey mentioned id should be unique with in a html page and with in the ready function of jquery try this code of uploadify :

$(function() {
<?php for($i=0;$i<20;i++){?>

   $("#browse<?php echo $i?>").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
<?php }?>
});

有关更多信息，请查看uploadify网站

Answer 4

您可以尝试使用此插件http://blueimp.github.com/jQuery-File-Upload/

这是迄今为止我发现的最好的。您可以使用一个添加files button添加任意数量的文件，它具有全局和本地进度条以及许多其他选项。

Answer 5

对于多次上传，请设置参数'multi'：ture

    $(function() {
      $("#file_upload").uploadify({
        'multi'    : true,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
      });
   });

在PHP中使用多个文件上传按钮上传Ajax文件

5 个答案: