目标:能够在可调整大小的 div 中加载用户选择的图像文件,以允许在提交之前调整图像大小(使用 jQuery 可调整大小插件)。
1) 视图的布局在upload_myimage.tpl.html 中定义(片段如下所示)。
2)它被初始化为在设置为“可调整大小”的 div 中显示任意图像。图像显示和调整大小工作。
3) 选择图像文件并点击“上传文件”(HTML 表单中的按钮)后,调用 PHP 函数 update_mypicture()(如下所示的片段)来替换上述图像。upload.php 的第 24 行出错:未捕获的 TypeError:无法将属性“onload”设置为 null。img 出于某种原因返回为空。任何想法为什么?
-- 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
}
?>