Get Image file tag values with Ajax (jquery version) and show the result
as the real-time previewer
I believed it is possible for me to simplify me previous project Click
here! to build an upload previewer so the editor can use it to see what he
puts before upload to the server. (just a simple previewer without loading
or saving to the databse with php script).
I use the same short Ajax and html form scripts and revise the jquery
selector a little bit. Now it is fine for me to see the text input.
Everytime I insert new word the text area will show exactly what I do.
However, something seemes to go astray with the image part. I try to use
image selector (attr"src") to get the path and hope it could get the photo
and show in the tag I build. However I could only get the values as path
root such as (C:/images/img1.png) insead the whole picture. The following
are scripts with mentioned issues:
<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>
I also include my short php script as the XML file for above Ajax:
<?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>";
I understand experts on SO had built powerful and professional Ajax
previewer with multiple function. However, as an beginner and learner I am
quite satisfied with my rookie and backward script. Hope someone can help
with the bugs. Any possible advice or suggestion is welcome!
echo "</caculation>";
?>
No comments:
Post a Comment