Взаимодействие с iframe?

Question

[kshkld7ck]

День добрый. Вляпался в ситуацию, из которой нужно выйти. Есть страница, на которой есть форма. Внутри формы вставляется iframe, внутри которого загрузка файла. Необходимо сделать так, чтобы конечная кнопка после всего заполнения(а конкретно после загрузки файла в iframe) разблокировалась.

Answer 1

[Виталий Архипов]

Если iframe находится на том же домене, то он может общаться с главным окном напрямую.
Псевдокод:

file.onload = ()=>{ // после загрузки файла
    parent.fileReady(); // вызываем функцию у родительского окна
};

Comments

[kshkld7ck]

Да, на том же домене. К сожалению не совсем понял Ваш код..

[Виталий Архипов]

kshkld7ck, покажите код, как вы ждете загрузку файла?

[kshkld7ck]

внутри фрейма:

<form enctype="multipart/form-data" action="upload.php" method="post"> <!--для сервера-->
				 	<input type="hidden" value="" id="lastname" name="name" >
    <input type="hidden" name="MAX_FILE_SIZE" value="5000000" /><!--максимально допустимый размер файла для загрузки в байтах-->
    Выбрать файл для загрузки: <input name="uploaded_file" type="file" accept="image/*" enctype="multipart/form-data"/><!--файл для загрузки-->
    <input type="submit" value="Отправить" /><!--кнопка загрузки-->
</form>

сам upload.php:

<?php
// проверяем, что есть файл
if((!empty($_FILES["uploaded_file"])) && ($_FILES['uploaded_file']['error'] == 0)) {

  $filename = basename($_FILES['uploaded_file']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
  
$today = date("d.m.y");


$nama=urldecode($_POST['name']);

$filename="$nama-$today.$ext";

    // путь для сохранения файла
      $newname = dirname(__FILE__).'/upload/'.$filename;
      // проверяем, файл с таким названием уже есть на сервере
      if (!file_exists($newname)) {
        // переместить загруженный файл в новое место
        if ((move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$newname))) {
           echo "Прелестно, файл был загружен: ".$newname;

        } else {
           echo "Произошла ошибка при загрузке файла!";
        }
      } else {
         echo "Ошибка: файл ".$_FILES["uploaded_file"]["name"]." уже существует";
      }

} else {
 echo "Ошибка: файл не загружен!";
}
?>

и соответственно главный файл, в котором вызывается фрейм

<input type="text" name="name1" id="name1" value="">	
<input type="text" name="name2" id="name2" value="">
<iframe src="index.html" frameborder="0" width="800px"></iframe>
<input type="submit" disabled="true">
	<script>var input = document.querySelector("input[type='file']");
input.onchange = function () {
   this.form.submit();
}</script>

[Виталий Архипов]

kshkld7ck, вот в главном файле создайте функцию

function fileUploaded(){
    form.submit();
}

А в коде iframe вместо этого echo "Прелестно, файл был загружен: ".$newname;
напишите

echo "Прелестно, файл был загружен: ".$newname;
echo "<script>parent.fileUploaded();</script>";

[kshkld7ck]

Виталий Архипов, не выходит(

[Виталий Архипов]

kshkld7ck, что именно?

[kshkld7ck]

Виталий Архипов, ну как я понимаю, после загрузки должен срабатывать инпут на главной странице, но этого не происходит

[Виталий Архипов]

kshkld7ck, не должен он срабатывать, он внутри iframe и в любом случае он срабатывает только на выбор файла, а у вас вообще iframe после submit - перезагружает страницу, сделайте как я говорю.

[kshkld7ck]

Виталий Архипов, Сделал. Никаких изменений не происходит

[Виталий Архипов]

kshkld7ck, покажите весь текущий код

[kshkld7ck]

Виталий Архипов, Прошу прощения. Я немного некорректно отправил код. Отправлю заново, с фиксами
Главная страница, в которой вызывается фрейм

<form action="index.html"><input type="text" name="name1" id="name1" value="">
<input type="text" name="name2" id="name2" value="">
<iframe src="" id="dwnld" style="display:none"  frameborder="0" width="800px"></iframe>
<input type="submit" disabled="true" value="Надо нажать меня"></form>	
<script>function fileUploaded(){
    form.submit();
 

}</script>

Страница с загрузкой файла

<form enctype="multipart/form-data" action="upload.php" method="post"> <!--для сервера-->
				 	<input type="hidden" value="" id="lastname" name="name" >
    <input type="hidden" name="MAX_FILE_SIZE" value="5000000" /><!--максимально допустимый размер файла для загрузки в байтах-->
    Выбрать файл для загрузки: <input name="uploaded_file" type="file" accept="image/*" enctype="multipart/form-data"/><!--файл для загрузки-->
    <input type="submit" value="Отправить" hidden /><!--кнопка загрузки-->
</form>
<script>var input = document.querySelector("input[type='file']");
input.onchange = function () {
   this.form.submit();
}</script>

и upload.php

<?php
// проверяем, что есть файл
if((!empty($_FILES["uploaded_file"])) && ($_FILES['uploaded_file']['error'] == 0)) {

  $filename = basename($_FILES['uploaded_file']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
  
$today = date("d.m.y");


$nama=urldecode($_POST['name']);

$filename="$nama-$today.$ext";

    // путь для сохранения файла
      $newname = dirname(__FILE__).'/upload/'.$filename;
      // проверяем, файл с таким названием уже есть на сервере
      if (!file_exists($newname)) {
        // переместить загруженный файл в новое место
        if ((move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$newname))) {
           echo "Прелестно, файл был загружен: ".$newname;
          echo "<script>parent.fileUploaded();</script>";
        } else {
           echo "Произошла ошибка при загрузке файла!";
        }
      } else {
         echo "Ошибка: файл ".$_FILES["uploaded_file"]["name"]." уже существует";
      }

} else {
 echo "Ошибка: файл не загружен!";
}
?>

[Виталий Архипов]

kshkld7ck, предполагалось, что вы переработаете мой код, а не тупо вставите. Замените в главном файле

window.fileUploaded = function(){
document.querySelector("form").submit();
}

И покажите, что выводится в консоли JS

[kshkld7ck]

Виталий Архипов, ничего не выводится
Вот тестовый вариант

[Виталий Архипов]

kshkld7ck, И почему после загрузки файла нету моего кода? А только вот это?

Прелестно, файл был загружен: /home/u441880/amulex.ru/www/_dev/testdownload/upload/аыва-24.04.18.png

[kshkld7ck]

Виталий Архипов, код вставлен, сейчас посмотрю в чем проблема, почему не выводит

[kshkld7ck]

Виталий Архипов, моя невнимательность и глупость сделала свое дело. Нашел в чем ошибка, все начало работать. Спасибо Вам за помощь и терпение! :)

Answer 2

[Coder321]

В родительском окне делаете что то типа этого:

window.frames[0].addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
    console.log(event.data);
}

В дочернем после того как файл загрузится делаете:
window.postMessage('Hello World', 'Your domain');
вот вам и общение между окнами