我相信有可能简化我以前的项目单击此处！构建一个上传预览器，这样编辑就可以在上传到服务器之前使用它来查看他放了什么。（只是一个简单的预览程序，不需要用php脚本加载或保存到数据库中）。
我使用相同的短Ajax和html表单脚本，并稍微修改了jquery选择器。现在我可以看到文本输入了。每次我插入新单词时，文本区域都会准确地显示我所做的事情。然而，图像部分似乎出现了一些错误。我尝试使用图像选择器（attr"src"）来获取路径，并希望它能获得照片并显示在我构建的标签中。然而，我只能获得路径根的值，例如（C:''images/img1.png）插入整个图片。以下是涉及上述问题的脚本：
<script language="JavaScript">
$(document).ready(function() {
$("form").keyup( function() {
var qtyVal = $('.qty').val();
var contentVal = $('.content').val();
var imageVal = $('input:file').val();
// get
$.ajax({
type: 'POST',
url: 'result1.php',
data: { qty : qtyVal,
content : contentVal,
image : imageVal,
},
success: function(data) {
// get XML value
$('#result').html($(data).find('total').text());
$('#result1').html($(data).find('content').text());
//I bleieved something goes wrong with the following script!
$('#test').attr("src").html($(data).find('upload').text());
}
});
return false;
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#news").hide();
$("#flip").click(function(){
$("#news").slideToggle("slow");
});
});
</script>
</head>
<body>
<a href="#"><div id="flip">previewer</div></a>
<div id="news" class="news">
<form method="post" enctype="multipart/form-data">
<table cellspacing="4" cellpadding="2">
<tr><th>title</th><th>content</th></tr>
<tr>
<td>
<div id="result2" class="box" style="width:300px; height:350px;">
//image block where I want to show the image by creating an imge tag>
<img src="#" class="test" /></div></td>
<td><div id="result" class="box" style="height:100px;"></div>
<div id="result1" class="box" style="height:250px; overflow:hidden;"></div>
</td></tr>
</div>
<td bgcolor="#CCCCCC"><input type="text" class="qty" name="qty" ></td>
<td bgcolor="#CCCCCC"><textarea type="text" class="content" name="content" ></textarea></td>
<td><input type="file" class="image" name="image"/></td>
<td bgcolor="#CCCCCC"><input type="submit" name="btnUpdate" value="update" />
<input type="submit" name="btnDelete" value="delete" />
</td>
</tr><br />
<tr><td colspan="5" align="center">div></td></tr>
</form>
</table>
我还将我的php短脚本作为上面Ajax的XML文件：
<?php
// XML
header("Content-Type:text/html; charset=utf-8");
// GET the text and image values
$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
$content = (isset($_POST["content"]) ) ? $_POST["content"] : $_GET["content"];
$image = (isset($_POST["image"]) ) ? $_POST["image"] : $_GET["image"];
echo "<?xml version='"1.0'" ?>";
echo "<caculation>";
echo "<total>" . "$qty" . "</total>";
// right now I can get the path back to the html page.
echo "<upload>"."$image"."</upload>";
echo "<content>"."$content"."</content>";
echo "</caculation>";
?>
据我所知，SO方面的专家已经构建了功能强大、专业的Ajax预览器，具有多种功能。然而，作为一个初学者和学习者，我对我的新手和落后的剧本感到非常满意。希望有人能帮上忙。欢迎任何可能的建议或建议！
如果使用attr（'sc'），则它将仅返回路径。如果你想要整个图像，那么在服务器中为get请求将响应设置为图像，或者使用base64字符串图像并使用数据uri方案来显示图像