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>

在身体里我有这个：

<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'/>";

所以我想在我的回声中关闭预览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并注入新的内容，你所做的事情可能比它的价值更棘手。我从来没有试过这样做，但我觉得这不会是跨浏览器兼容的，即使如果你让它工作，比如说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"/>';

jQuery调用php脚本，其中echos div但没有回显

1 个答案: