Php 使用Ajax（jquery版本）获取图像文件标记值，并将结果显示为实时预览器
我相信我有可能简化我以前的项目点击！ 构建一个上传预览器，以便编辑可以在上传到服务器之前使用它查看他所放置的内容。（只是一个简单的预览程序，不需要用php脚本加载或保存到数据库中） 我使用相同的短Ajax和html表单脚本，并稍微修改了jquery选择器。 现在可以看到文本输入了。每次我插入新单词时，文本区域都会精确显示我所做的事情。然而，图像部分似乎误入歧途。我尝试使用图像选择器（attr“src”）获取路径，并希望它能够获取照片并显示在我构建的标记中。但是，我只能获得路径根的值，例如（C:/images/img1.png）插入整个图片。以下是存在上述问题的脚本：Php 使用Ajax（jquery版本）获取图像文件标记值，并将结果显示为实时预览器,php,javascript,jquery,ajax,Php,Javascript,Jquery,Ajax,我相信我有可能简化我以前的项目点击！ 构建一个上传预览器，以便编辑可以在上传到服务器之前使用它查看他所放置的内容。（只是一个简单的预览程序，不需要用php脚本加载或保存到数据库中） 我使用相同的短Ajax和html表单脚本，并稍微修改了jquery选择器。 现在可以看到文本输入了。每次我插入新单词时，文本区域都会精确显示我所做的事情。然而，图像部分似乎误入歧途。我尝试使用图像选择器（attr“src”）获取路径，并希望它能够获取照片并显示在我构建的标记中。但是，我只能获得路径根的值，例如（C:/
<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>
$（文档）.ready（函数（）{
$（“表单”）.keyup（函数（）{
var qtyVal=$（'.qty'）.val（）；
var contentVal=$（'.content'）.val（）；
var imageVal=$（'input:file'）.val（）；
//得到
$.ajax({
键入：“POST”，
url:'result1.php'，
数据：{数量：qtyVal，
内容：contentVal，
图片：imageVal，
},
成功：功能（数据）{
//获取XML值
$（'#result'）.html（$（数据）.find（'total'）.text（））；
$（'#result1'）.html（$（数据）.find（'content'）.text（））；
//我发现下面的脚本出了问题！
$（'#test'）.attr（“src”）.html（$（data.find（'upload'）.text（））；
}
});
返回false；
});
});
$（文档）.ready（函数（）{
$（“#新闻”）.hide（）；
$（“#翻转”）。单击（函数（）{
$（“#新闻”）。滑动切换（“慢速”）；
});
});
标题内容
//图像块，其中我要通过创建imge标记来显示图像>
div>
<?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>";
?>