Question

所以我有一个相当奇怪的问题，我想知道是否有人对此有所了解。

我有一个页面，其中显示已上传到我们服务器的文件网格。网格工具栏使他们能够上传更多文件。当他们单击工具栏上的“添加文件”按钮时，会出现一个jQuery UI对话框模式窗口，其中包含一个简单的文件上载控件。选择文件后，他们会单击Dialog上的“Upload”按钮，该按钮提交基础表单以进行上传。另请注意，因为我使用的是asp.net，所以页面上只有一个表单，所以我没有提交错误的表单。

现在......当我尝试在后端查找上传的文件时，没有上传任何文件。更糟糕的是，如果我将上传控件移出对话框div并直接从页面中使用而没有对话框，则上传工作正常。

这让我相信，即使我在主窗体中定义将成为我的对话框的div以允许它使用回发提交，jQuery也会以某种方式移动它或将其与表单解除关联。

这可能吗？或者还有什么我可能会失踪？我似乎无法找到任何方式的文档。提前谢谢！

Answer 1

你是对的。对话框将其内容移出其形式之外，并将其附加到正文中。可能是为了更好地控制DOM，确保它始终显示在中心，高于一切，并且不包含在某些绝对定位的DIV中......

Answer 2

您需要将对话框移动到表单内。

var dialog = $("#dialog").dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  buttons: {
    "Upload": function() {
      __doPostBack('uploadfile', '');
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $(this).dialog("close");
    }
  }
});

dialog.parent().appendTo($("form:first"));

Answer 3

这里发生的是Block UI删除其模态中按钮上的所有点击功能。为了解决这个问题，我找到的最佳解决方案是使用隐藏按钮，然后执行所需的处理。

以下是一个例子：

<强> HTML

<asp:Button runat="server" ID="btn_Upload" OnClientClick="UploadFiles(); return false;" />
<asp:Button runat="server" ID="btn_UploadClick" OnClick="btn_UploadFiles_Click" style="display:none;" />

<强>使用Javascript / Jquery的

function UploadFiles()
{
    $.unblockUI({
        onUnblock: function() {
            $('[id$=btn_UploadClick]').click();
        }
     });
}

文件上传在jQuery UI对话框中无效

3 个答案: