php - tpl (Smarty) を使用する場合、PHP に埋め込まれた Javascript コードで id によって DOM 要素を取得する方法は?

Question

目的: ユーザーが選択した画像ファイルをサイズ変更可能な div にロードして、送信前に画像のサイズを変更できるようにする (jQuery のサイズ変更可能なプラグインを使用)。

1) ビューのレイアウトは、upload_myimage.tpl.html で定義されます (スニペットを以下に示します)。

2）「サイズ変更可能」に設定されたdivに任意の画像を表示するように初期化されます。画像が表示され、サイズ変更が機能します。

3) 画像ファイルを選択して [ファイルのアップロード] (HTML フォームのボタン) をクリックすると、PHP 関数 update_mypicture() (以下に示すスニペット) が呼び出され、前述の画像が置き換えられます。upload.php の 24 行目のエラー: Uncaught TypeError: null のプロパティ 'onload' を設定できません。何らかの理由で img が null として返されます。理由はありますか？

-- tpl コードのスニペット --

<div id ="box">
    <img src="/image/logo.jpg" width="100%" height="100%" id="image"/>
</div>
<script type="text/javascript">
    $("#box").resizable(); 
</script>

-- PHP コードのスニペット --

<?php
  if($_POST['submitScaleName'] == "Submit") {
  ?>
        <script type="text/javascript">
        function scale_mypicture(pic){
            var img = parent.document.getElementById("image");      // img is returned as null
             img.setAttribute("src", pic);
             var memeFilename = parent.document.getElementById("memeFilename");
             memeFilename.value = "<?php echo $_FILES['file']["name"]; ?>";
        }
        parent.document.getElementById("img_filename").value = "";
        scale_mypicture("<?php echo '/image/'.$_FILES['file']["name"]; ?>");
        </script>
<?php
}
?>