Jquery UI对话框中的Uploadifive

Question

我已经为这件事挠头好长时间了。我在一个页面上使用uploadifive来允许文件上传，它工作得很好。现在，当我将浏览按钮/队列放在jQuery UI对话框中时，当单击“浏览”按钮时，文件浏览器将不会打开。

在下面的代码中，我已经将uploadifive脚本包装在一个函数中，然后在对话框打开时尝试调用该函数，但仍然不起作用？“浏览”按钮看起来像它应该出现的样子，但是当它被点击的时候什么也不做。

有解决这个问题的办法吗？

谢谢,

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

对话框HTML在这里；

<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

显然，modal: true选项存在问题，它会阻止windows文件，然后将其设置为modal: false及其工作。

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

首先，将您的表单放入div标记中并尝试。

就连我也有同样的问题。

检查geek提供的解决方案

希望这能有所帮助。

Answer 3

以下是一些观察结果。

我无法让你的代码与.uploadifive({一起工作。我不得不用.uploadify({ I found on the demo page替换它。这一更改至少让代码在jsfiddle中正确运行。

其次，我要对代码进行另一次审查，因为使用默认的uploadify代码，浏览器看起来工作得很好。

工作示例： http://jsfiddle.net/t6hHr/2/