使用 PHP 中的多个文件上传按钮上传 Ajax 文件答案

【问题标题】：Ajax file uploading with multiple file upload button in PHP使用 PHP 中的多个文件上传按钮上传 Ajax 文件
【发布时间】：2012-05-24 17:55:25
【问题描述】：

这是我的代码：

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

<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 从多个文件浏览器按钮上传图片？

【问题讨论】：

您正在使用 id 来附加按钮。 id 仅指一个元素而不是所有按钮。所以给像这样var btnUpload=$('#browse_1,#browse_2,#browse_2');这样的所有按钮的ID，在你的程序中使用真实的ID。
@Imdad：我使用了你的代码，但是只有第一个按钮打开了窗口，除了第一个其余的没有打开窗口

标签： php jquery ajax file-upload

【解决方案1】：

您应该知道 HTML 上的 id 标签它必须是唯一的标识符

试试这个：

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>

【讨论】：

【解决方案2】：

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

【讨论】：

这里只有一个浏览或文件按钮我需要不止一个数字来自数据库
对于多个上传设置参数 'multi' : ture $(function() { $("#file_upload").uploadify({ 'multi' : true, 'swf' : '/uploadify/uploadify .swf', 'uploader' : '/uploadify/uploadify.php' }); });

【解决方案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网站

【讨论】：

【解决方案4】：

你可以试试这个插件http://blueimp.github.com/jQuery-File-Upload/

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

【讨论】：

【解决方案5】：

对于多个上传设置参数'multi'：真的

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

【讨论】：