Question

我正在使用iframe上传图片。所以我有两个文件 - iframe文件和显示图像的文件。单击显示iframe的链接时，将运行以下代码：

function ShowUploadImageOut(RecordID) {
    $('#<%=hfPieceID.ClientID %>').val(RecordID);
    $("#dvAddImageOutturn").html(
        '<iframe id="iframeUpload" src="utilities/UploadPOD.aspx?id=uploadOutturn"></iframe>'
    );
}

在iframe上是一个上传按钮，用于将图像保存到计算机上的文件夹中，并将图像文件名设置为FileNameHidden

protected void btnUpload_Click(object sender, EventArgs e)
{
    if (fuUpload.HasFile)
    {
        if (Request.QueryString["id"] == "uploadOutturn")
        {
            String Path = ConfigurationManager.AppSettings["PieceOutturnFolder"].ToString()
                + Company.Current.CompCode;
            string FileName = fuUpload.FileName;

            if (File.Exists(Path + "/" + FileName))
            {
                File.Delete(Path + "/" + FileName);
            }

            fuUpload.SaveAs(Path + "/" + FileName);
            filename = FileName;
            imgTemp.ImageUrl = "/thumbnail.ashx?ImgFilePath=" + Path.Replace("/", "\\")
                + "\\" + FileName + @"&width=200&height=400";
            FileNameHidden.Value = FileName;
        }
    }
}

FileNameHidden将属性clientidmode设置为"static"：

<input type="hidden" id="FileNameHidden" runat="server" clientidmode="Static" />

返回显示图像的页面上有一个保存按钮。此按钮从FileNameHidden获取值并将其设置为隐藏字段。这个新的隐藏字段用于将文件名保存到数据库：

<asp:HiddenField ID="hfUploadedPieceHubImageFile" runat="server" />

<div id="dvAddEditImageOutturn" class="dvdraggable">   
    <div id="dvAddImageOutturn"></div>

    <asp:LinkButton ID="btnPieceHubUpdateImage"
        onclick="btnUpdatePieceImage_Click"
        OnClientClick="CloseUploadWindow();return GetPieceOutturnFilename();"
        CssClass="btnSaveSmall"
        runat="server"
    ></asp:LinkButton>
</div>

function GetPieceOutturnFilename() {
    if ($('#iframeUpload').contents().find('#FileNameHidden').length > 0) {
        $("#<%= hfUploadedPieceHubImageFile.ClientID %>").val(
            $('#iframeUpload').contents().find('#FileNameHidden').val()
        );
    }
    return true;
}

问题出在GetPieceOutturnfile函数中。 $('#iframeUpload').contents().find('#FileNameHidden').length始终为零。它应该是从iframe中找到FileNameHidden。

通过代码我可以看到FileNameHidden肯定会设置图像的名称：

<input name="FileNameHidden" type="hidden" id="FileNameHidden" value="test.jpg">

所以我不明白为什么它说长度为零

Answer 1

问题在于btnPieceHubUpdateImage的{{1}}：

onClientClick

首先关闭窗口然后尝试从Iframe保存OnClientClick="CloseUploadWindow(); return GetPieceOutturnFilename();"。将它们交换为FileNameHidden首先解决问题。

Answer 2

我使用了这段代码。确保加载到iframe（child.html）中的内容位于同一个域中，或者出于安全原因它不起作用。此外，它无法在桌面上运行文件。它们需要从服务器提供。

<强>的index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script>
    $(document).ready(function() {
      $("#iframeUpload").load(function() {
        var fileName = $(this).contents().find("#FileNameHidden").val();
        console.log(fileName);
      });
    });
  </script>
</head>
<body>
  <iframe id="iframeUpload" src="child.html" />
</body>
</html>

<强> child.html

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <form>
      <input name="FileNameHidden" type="hidden" id="FileNameHidden" style="display:none" value="test.jpg">
    </form>
  </body>
</html>

如果这无法解决您的问题，您应该提供文件或jsfiddle。

无法从iframe中找到FileHiddenName

2 个答案: