在PHP中使用多个文件上传按钮上传Ajax文件 - Ajax file uploading with multiple file upload button in PHP

Ajax file uploading with multiple file upload button in PHP

本文关键字：文件按钮 Ajax PHP | 更新日期: 2023-09-27

这是我的代码：

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

网页部分

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

当我单击第一个浏览按钮时，将显示文件打开窗口，但是从第二个到结束，没有显示用于选择图像的打开窗口。

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

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

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

你应该

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

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

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 }?>
});

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

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

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

对于多个上传，设置参数"multi"： ture

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