Ajax圖片上傳和預覽表格

Question

我正在使用腳本來發布上傳的圖像預覽。 工作正常。 我只想在一個div中顯示圖像，而在另一個div中顯示錯誤或成功消息。 有機會這樣做嗎？ 這是代碼。

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代碼

<?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代碼

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;
}

我想在同一位置div預覽中顯示所有消息（error-msg，ok-msg）以及div輸出和圖像。 誰能告訴我該怎么做。 提前致謝。

Answer 1

使用json dataType和success callback function例如

$("#imageform").ajaxForm(
{
    dataType:'json',
    success:function(json){
       $('#output').html(json.img);
       $('#preview').html(json.msg);
    }
}).submit();

在PHP中

返回數據如

echo json_encode(array('img'=>"<img src='...' />",'msg'=>"Message goes here"));
return;

Answer 2

你可以使用- 成功 ：與錯誤 ：eventListner

$("#imageform").ajaxForm(
{
dataType:'json',
success:function(json){
   write the success msg 
}
error: function() { 
    write the error msg 
}   


}).submit();