jQuery AjaxUpload, have to click button twice?

问题:

I am using the AjaxUpload plugin with jQuery, and everything is working fine for the most part, but I have to click my button twice to get it to execute. I'm guessing this is a scope issue... or(?) still learning...

Here is my code:

    $(".upload-button").live("click", function(event) {
       event.preventDefault();
       var currentId = $(this).closest("div").attr("id").replace("slide-", "");
       new AjaxUpload($(this), {
         action: "./php/upload.php",
         name: 'userfile',
         autoSubmit: true,
         onSubmit: function(file , ext) {
       },
       onComplete: function(file, response) {
         // enable upload button
         // this.enable();
         $("#slide-" + currentId).find(".movie-image").attr("src", baseImgPath + file);
         $("#mImg" + currentId).val(file);
      }  
   });

Any ideas are appreciated. :)

回答1:

Got it worked out - here's how for anyone else that might be having a similar issue...

The main issue was that these buttons were being created dynamically, and AjaxUpload will not be initially bound in the .live() call, hence the "click, move, click again, trigger".

By calling AjaxUpload (wrapped in it's own function, as below), within my loop as the buttons are created, they are initially bound, and function properly.

The line used in the loop:

makeUpButton(("#upload-button-" + slideCount), slideCount);

The AjaxUpload call:

function makeUpButton(theButton, theId) {
    new AjaxUpload(theButton, {
        action: "./php/upload.php",
        name: 'userfile',
        autoSubmit: true,
        onSubmit: function(file , ext) {
            this.disable();
        },
        onComplete: function(file, response) {
            this.enable();
            $("#slide-" + theId).find(".movie-image").attr("src", baseImgPath + file);
            $("#mImg" + theId).val(file);
        }       
    });
}

Hope this helps someone, I know it was driving me nuts for a few days. ;) Cheers.

回答2:

Try this :

$(".upload-button").live("hover", function(event) {

   var currentId = $(this).closest("div").attr("id").replace("slide-", "");
   new AjaxUpload($(this), {
     action: "./php/upload.php",
     name: 'userfile',
     autoSubmit: true,
     onSubmit: function(file , ext) {
         //onsubmit code here..
     },
     onComplete: function(file, response) {
         // oncomplete code here
     }  
   });
   $(this).trigger('click');   

});

Mine working but I'm not really sure how it works. The 'hover' (instead of 'click') will create a new AjaxUpload (this will prevent from click it twice)

回答3:

If you are creating a dynamic button, you need create a AjaxUpload using a ID for each button, try this:

// to add new button                                                                                                                                  
$("#add_sector").click(function() {
    var ID = [Generate a new ID];
    var button = '<a href="javascript:;" id="' + ID + '" class="subir_imagen"><img src="images/icon_subir32.png"></a>';


    $('#cont_img_catalogo').append(button);

    //create Ajax                                                                                                                                     
    new AjaxUpload($('#' + ID ),{
      action: 'procesar_imagen.php',
          name: 'image',
          onSubmit : function(file, ext){
          // desabilitar el boton                                                                                                                     
          this.disable();
          ...
            },
          onComplete: function(file, response){
          // Habilitar boton otra vez                                                                                                                 
          this.enable();

          ...

            }
      });



  });

To delete button use:

$('#' + ID).fadeOut("slow", function() { $('#' + ID).remove(); });

if you use img, you need the class

a, a:visited{
display: block;
float: left;
text-decoration:none;}

回答4:

try this:

   var $button = $(".upload-button");
   new AjaxUpload($button, {
         action: "./php/upload.php",
         name: 'userfile',
         autoSubmit: true,
         onSubmit: function(file , ext) {
       },
       onComplete: function(file, response) {
         // enable upload button
         // this.enable();
         var currentId = $(this).closest("div").attr("id").replace("slide-", "");
         $("#slide-" + currentId).find(".movie-image").attr("src", baseImgPath + file);
         $("#mImg" + currentId).val(file);
      }  
   });

回答5:

<script type="text/javascript">

 $(document).ready(function() {
      $('#yourlinkorbutton').click(function(){

              new AjaxUpload('#yourlinkorbutton'),{

                  ....

              });
     });

     $('#yourlinkorbutton').trigger.click();
     $('#yourlinkorbutton').trigger.click();
});

that will get you two click when the page loads. one click from there on.

回答6:

if you using dynamic control , that time we are facing problem in twice click, i have solved that it is working for me. i has spend two days and solve that please check below steps:=

Add java script load function in php looping for each using below

<?php
for ($i=1; $i<=5; $i++)
  {
?>
<script>
$(window).load(function () 
        {
        uploadphoto(<?php echo $i; ?>)                
            });
</script>
<a href="javascript:void(0)" id="photo<?php echo $i; ?>" onclick="uploadphoto(<?php echo $i; ?>)" style="color: #666;"> Upload </a>
<?php

}
?>

and your javascript file you can get dynamic id from php loop

function  uploadphoto(id)
{

new AjaxUpload('#photo'+id, {

so, you can pass dynamic ID above sample line, that's it :) happy coding