ajax圖片上傳和預覽表格

我使用腳本輸出上傳的圖片預覽。它工作正常。我只想在一個div中顯示圖像，並在另一個div中顯示錯誤或成功按摩。有沒有機會做到這一點？這是代碼。ajax圖片上傳和預覽表格

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

我喜歡來顯示所有的按摩（錯誤味精，OK-MSG）和div輸出和圖像在相同的地方div預覽。誰能告訴我如何做到這一點。提前致謝。

來源

2013-07-03 maxlk

使用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;

來源

2013-07-03 08:01:45

謝謝你的工作很棒 – maxlk

可以使用 - 成功：和錯誤：eventListner

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


}).submit();

來源

2013-07-03 08:13:12

ajax圖片上傳和預覽表格

回答

相關問題