アップロードした画像を表示するには

質問

アップロードした画像を表示したいと考えてます。アップロードは非同期
なので、アップロードを実行するchild.phpで画像表示の処理もして、アッ
プロードの命令を出すparent.phpに画像の表示を行います。

---- child.php(一部) ----
move_uploaded_file($_FILES["upload_file"]["tmp_name"], $image_name);
echo '<img src="' . $image_name . '" width="100" height="100">';

これで成功します。ただ画像を常に同じ場所に表示したくechoの部分を以下
のように書き換えると失敗します。

echo '<script>';
echo 'document.getElementById("pict").src="' . $image_name . '.jpg";';
echo '</script>';

---- parent.php(一部) ----
<img src="" id="pict">

クロームのDevToolsで調べるとElementsでは以下のようにsrcに何もなく失敗してます。
<img src id="pict">

ところがSourcesでは「Cannot set property 'src' of null」とエラーが出ているのに
以下のようにsrcには画像名は入ってます。

<script>document.getElementById("pict").src="./image1/bfbiD.jpg";</script>

なお同名の画像はきちんとアップロードしてます。対策があれば教えてもら
えないでしょうか。

回答No.1

LancerVII · ベストアンサー

こんにちは。

スクリプトをimg要素の後に持って行くか、ページのonloadで呼び出せば動くと思います。
エラーは
document.getElementById("pict")が取得できないためです。
（imgタグ生成前に呼んでいませんか？）

お礼

そのとおりでした。imgタグ生成後にgetElementByIdを使ったところあっさり表示されました。

ありがとうございます。