1

This is my code:

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

When I click on the first browse button, the file open window is displayed, but from the 2nd to the end, there is no opening window displayed for selecting images.

Where is the problem in my code?

I already loaded the .js files for ajax upload?

How can I upload images from multiple file browser buttons using ajax?

2
  • You are using id for attaching the buttons. id refers to only one element not all buttons. so give id of all buttons like this var btnUpload=$('#browse_1,#browse_2,#browse_2'); use the real ids in your program.
    – Imdad
    May 17, 2012 at 6:40
  • @Imdad:I used your code but only the first button open the window except first remaining are not open the window
    – Kichu
    May 17, 2012 at 7:09

5 Answers 5

0

You should know about id tag on HTML it have to be unique IDentifier

try this:

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

and in php

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

For multiple file uploads use Jquery plugin uploadify() check the link for demo: http://www.uploadify.com/demos/

2
  • here only one browse or file button i need more than one the number is coming from databse
    – Kichu
    May 17, 2012 at 6:38
  • For multiple uploads set parameter 'multi' : ture $(function() { $("#file_upload").uploadify({ 'multi' : true, 'swf' : '/uploadify/uploadify.swf', 'uploader' : '/uploadify/uploadify.php' }); });
    – Silz
    Jun 3, 2014 at 8:33
0
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 }?>
});

For more check the uploadify site

0

You can try using this plugin http://blueimp.github.com/jQuery-File-Upload/

This is the best I have found so far. You can add as many files as you want with one add files button, it has both global and local progress bar and many other options.

0

For multiple uploads set parameter 'multi' : ture

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.