Не удалось найти FileHiddenName из iframe

Я использую 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 всегда равен нулю. Он должен найти FileNameHidden из iframe.

Пройдя через код, который я вижу, FileNameHidden определенно устанавливает имя изображения:

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

Поэтому я не понимаю, почему он говорит, что длина равна нулю

Ответы

Ответ 1

Проблема заключалась в btnPieceHubUpdateImage для onClientClick:

OnClientClick="CloseUploadWindow();
return GetPieceOutturnFilename();"

Сначала оно закрывало окно, а затем пыталось сохранить FileNameHidden из Iframe. Обменивая их так, чтобы он вызывал GetPieceOutturnFileName, сначала решила проблему.

Ответ 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.