[英]ajax image upload and preview form
Im using a script to out put uploaded image preview. 我正在使用脚本来发布上传的图像预览。 It works fine. 工作正常。 i just like to show the image in one div and error or success massage in another div. 我只想在一个div中显示图像,而在另一个div中显示错误或成功消息。 is there any chance to do this? 有机会这样做吗? Here is the code. 这是代码。
Java script Java脚本
<script type="text/javascript">
$(document).ready(function(){
$('#photoimg').live('change', function(){
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>
HTML Code HTML代码
<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>
<div id="output"></div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
PHP Code PHP代码
include('db.php');
session_start();
$session_id='1'; // User session id
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
echo "<span class=ok-msg">Image has been uploaded..!</span>";
}
else
echo "<span class=error-msg">failed<span>";
}
else
echo "<span class=error-msg">Image file size max 1 MB</span>";
}
else
echo "<span class=error-msg">Invalid file format..</span>";
}
else
echo "<span class=error-msg">Please select image..!</span>";
exit;
}
I like to show all the massages (error-msg, ok-msg) and in the div output and image in the same place div preview. 我想在同一位置div预览中显示所有消息(error-msg,ok-msg)以及div输出和图像。 can anyone tell me how to do this. 谁能告诉我该怎么做。 thanks in advance. 提前致谢。
Use json dataType
and success callback function
like, 使用json dataType
和success callback function
例如
$("#imageform").ajaxForm(
{
dataType:'json',
success:function(json){
$('#output').html(json.img);
$('#preview').html(json.msg);
}
}).submit();
In PHP 在PHP中
Return data like 返回数据如
echo json_encode(array('img'=>"<img src='...' />",'msg'=>"Message goes here"));
return;
you can use the - success : and the error : eventListner 你可以使用- 成功 :与错误 :eventListner
$("#imageform").ajaxForm(
{
dataType:'json',
success:function(json){
write the success msg
}
error: function() {
write the error msg
}
}).submit();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.