php - jQuery调用php脚本，它回显div但不回显

Question

我正在开发一个上传脚本，您可以在其中上传图片，并且可以直接预览。选择文件后，它会将其传递给一个 php 脚本，该脚本会回显图片。第一个代码中的 jQuery 将其插入到我的预览中。在图片之后，我正在打印一些输入字段。在输入字段中，您可以输入想要在图片上显示的文本，如果单击预览，它会修改图片并将其显示在其他图片所在的位置，但输入字段应保留在那里。我的代码:

<script type="text/javascript"><!--//--><![CDATA[//><!--

$j(document).ready(function() {      
$j('#photoimg').live('change', function() { 
    $j("#preview").html('');
    $j("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
    $j("#imageform").ajaxForm({
        target: '#preview'
        }

    }).submit();
});

}); 
 //--><!]]></script>

在我的 body 里有这个:

<div id='preview'>
</div>

我对此表示赞同:

echo "<img src='uploads/".$actual_image_name."'  class='preview'><br  />";
echo "</div><div id='preview3'>";
echo "Line 1 <input type='text' id='cardtext1' name='cardtext1' value='1'/>";

所以我想关闭 echo 中的预览 div 并打开另一个，我可以更改第一个 div 中的 html 代码(带有图片)，而不需要对输入字段进行任何更改。 html 代码应该是这样的:

 <div id='preview'>
 <img src='uploads/test.jpg'  class='preview'><br  />
 </div>  <====this one is missing
 <div id='preview3'>
 <input type='text' id='cardtext1' name='cardtext1' value='1'/>
 </div>

问题是，如果我检查网站的 html 代码，它只显示新内容的开始，但 closetag 不会回显。我也尝试将其放入 php 变量中，但也不起作用。为什么是这样？以及如何解决？

Answer 1

您的 JavaScript 代码(jQuery 部分)看起来有问题。这里似乎有一个错误的右花括号 }:

$j('#photoimg').live('change', function() { 
    $j("#preview").html('');
    $j("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
    $j("#imageform").ajaxForm({
        target: '#preview'
    } // <-- right here
    }).submit();
});

看起来应该是:

$j("#imageform").ajaxForm({
    target: '#preview'
}).submit();

无论如何，尝试动态关闭该 div 并注入(inject)一个新的 div 所做的事情可能比它的值(value)更棘手。我从未尝试过这样做，但我觉得即使如果你让它在例如 Firefox 中工作，它也不会跨浏览器兼容。

与其使用 $preview 作为目标，为什么不将其包装在另一个 div 容器中并使用它:

<div id="container">
    <div id="preview"></div>
</div>

然后，你的 jQuery 将如下所示:

$j('#photoimg').live('change', function() { 
    $j("#container").html('')
        .html('<img src="loader.gif" alt="Uploading...."/>');
    $j("#imageform").ajaxForm({
        target: '#container'
    }).submit();
});

在这种情况下，生成的 PHP 最终结果如下:

echo '<div id="preview">',
     "<img src=\"uploads/{$actual_image_name}\" class=\"preview\"><br />",
     '</div><div id="preview3">',
     'Line 1 <input type="text" id="cardtext1" name="cardtext1" value="1"/>';