Uploadifive au sein de Jquery UI Dialog

Question

Je me gratte la tête depuis des lustres maintenant. J'utilise uploadifive sur une page pour permettre le téléchargement de fichiers, cela fonctionne très bien. Maintenant, quand je mets le bouton/file d'attente de navigation dans une boîte de dialogue d'interface utilisateur de jQuery le navigateur de fichier ne s'ouvrira pas quand le bouton de «navigation» est cliqué.

Dans le code ci-dessous j'ai enveloppé le script uploadifive dans une fonction, puis j'ai essayé d'appeler cette fonction quand la boîte de dialogue s'ouvre et que ça ne marche toujours pas ???? Le bouton "Parcourir" apparaît comme il se doit mais ne fait rien quand on clique dessus.

Y a-t-il une solution de contournement pour cela?

Merci,

// File upload wrapped in function 
    function upbind(){ 
     $('#file_upload').uploadifive({ 
      'auto'    : true, 
      //'checkScript'  : 'check-exists.php', 
      'formData'   : { 
            'timestamp' : '1234567890', 
            'token'  : '1234567890' 
           }, 
      'queueID'   : 'queue', 
      'uploadScript'  : 'uploadify/uploadifive.php', 
      'queueSizeLimit' : 1, 
      'multi'   : false, 
      'buttonText'  : 'BROWSE', 
      //'removeCompleted' : true, 
      'onSelect'   : function(file) { 
            $(".uploadifive-button").css("display", "none"); 
           }, 
      'onCancel'   : function() { 
            $(".uploadifive-button").css("display", "inherit"); 
           },     
      'onUploadComplete' : function(file, data) { console.log(data); alert('The file ' + data + ' uploaded successfully.');} 

     }); 
    } 

    // Call upbind script 
    upbind(); 

    // Process dialog box 
    $("#dialog-add-product").dialog({ 
     autoOpen: false, 
     resizable: false, 
     width: 400, 
     modal: true, 
     open: function(){ 
      $(this).parent().find('button:nth-child(2)').focus(); 
      upbind(); 
     }, 
     buttons: { 
      Ok: function(){ 
       // Function here 

      }, 
      Cancel: function() { 
       // Function here 

       $(this).dialog("close"); 
      } 
     } 
    }); // End add product dialog 

Le code HTML dialogue est ici;

<div id="dialog-add-product" class="dialog_add" title="Add product"> 
<form name="formAddProduct" id="formAddProduct" method="post" action=""> 
<input type="hidden" name="action" value="" id="addcat" /> 
<table> 
     <tr> 
     <td height="10" align="left" valign="middle" class="smallText" width="120"></td> 
     <td height="10" align="left" valign="middle"></td> 
     </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Product title:</td> 
     <td height="31" align="left" valign="middle"><input name="fields-ptitle" type="text" class="inputBoxAdd editstatus" id="fields-ptitle" tabindex="5" value="" /></td> 
     </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Category:</td> 
     <td height="31" align="left" valign="middle"><label for="fields-pcategory"></label> 
      <select name="fields-pcategory" id="fields-pcategory" class="inputBoxAdd editstatus"> 
          <option value="19">Door parts</option> 
          <option value="1">Hinges</option> 
          <option value="21">Testing 222</option> 
         </select></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Product code:</td> 
     <td height="31" align="left" valign="middle"><input name="fields-pcode" type="text" class="inputBoxAdd editstatus" id="fields-pcode" tabindex="5" value="" /></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Quantity:</td> 
     <td height="31" align="left" valign="middle"><input name="fields-pqty" type="text" class="inputBoxAdd editstatus" id="fields-pqty" tabindex="5" value="" /></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Trade price (£):</td> 
     <td height="31" align="left" valign="middle"><input name="fields-pprice" type="text" class="inputBoxAdd editstatus" id="fields-pprice" tabindex="5" value="" /></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Clearance price (£):</td> 
     <td height="31" align="left" valign="middle"><input name="fields-pclearance" type="text" class="inputBoxAdd editstatus" id="fields-pclearance" tabindex="5" value="" /></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Unit:</td> 
     <td height="31" align="left" valign="middle"><input name="fields-punit" type="text" class="inputBoxAdd editstatus" id="fields-punit" tabindex="5" value="" /></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Description:</td> 
     <td height="31" align="left" valign="middle"><textarea name="fields-pdescription" id="fields-pdescription" cols="30" rows="5"></textarea></td> 
    </tr> 
     <tr> 
     <td align="left" valign="middle" class="smallText">Image:</td> 
     <td align="left" valign="middle"><div id="queue"></div> 
    <input id="file_upload" name="file_upload" type="file" multiple></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText">Active:</td> 
     <td height="31" align="left" valign="middle"><input name="fields-pactive" type="checkbox" id="fields-pactive" value="1" /></td> 
    </tr> 
     <tr> 
     <td height="31" align="left" valign="middle" class="smallText"><div class="savetick"><img src="images/accept.png" width="24" height="24" /></div><div class="savespinner"><img src="images/savespin.gif" width="16" height="16" /></div></td> 
     <td height="31" align="left" valign="middle">&nbsp;</td> 
     </tr> 
</table> 
</form> 
</div> 

Answer 1

Apparemment, il y a un problème avec l'option modal: true, il empêche le fichier Windows, puis mis à modal: false et son travail.

// Process dialog box 
$("#dialog-add-product").dialog({ 
    ... 
    modal: false, 
    open: function(){ 
     $(this).parent().find('button:nth-child(2)').focus(); 
     upbind(); 
    }, 
    ... 
}); // End add product dialog 

Answer 2

D'abord, mettez votre div dans la balise de formulaire et essayer.

Même j'ai eu le même problème.

Vérifiez la solution donnée par geek

Hope this helps.

Answer 3

Voici quelques observations. Je n'ai pas réussi à faire fonctionner votre code avec .uploadifive({. J'ai dû le remplacer par .uploadify({ que I found on the demo page. Ce changement a au moins eu le code pour fonctionner correctement dans jsfiddle. Deuxièmement, je vous donnerais un autre avis sur le code, car avec le code de téléchargement par défaut, le navigateur semble fonctionner correctement.

Exemple de travail:http://jsfiddle.net/t6hHr/2/