无刷新上传图片 可以实时预览 选择图片后即自动上传，没有上传按钮

区别一般的上传，一般的上传要点击上传按钮，本例无按钮，选择图片后就自动上传

jquery.form.js版本为2.84

演示

 

 

XML/HTML Code

1. <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>  
2. <script type="text/javascript" src="scripts/jquery.form.js"></script>  
3.   
4. <script type="text/javascript" >  
5.  $(document).ready(function() {   
6.           
7.             $('#photoimg').live('change', function()            {   
8.                        $("#preview").html('');  
9.                 $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');  
10.             $("#imageform").ajaxForm({  
11.                         target: '#preview'  
12.         }).submit();  
13.           
14.             });  
15.         });   
16. </script>  
17. <div style="width:600px">  
18.   
19. <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>  
20. 上传 <input type="file" name="photoimg" id="photoimg" />  
21. </form>  
22. <div id='preview'>  
23. </div>  
24.   
25.   
26. </div>  

 ajaximage.php

PHP Code

1. <?php  
2. session_start();  
3. $session_id='1'; //$session id  
4. $path = "../upload/";  
5.   
6.     $valid_formats = array("jpg", "png", "gif", "bmp");  
7.     if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")  
8.         {  
9.             $name = $_FILES['photoimg']['name'];  
10.             $size = $_FILES['photoimg']['size'];  
11.               
12.             if(strlen($name))  
13.                 {  
14.                     list($txt, $ext) = explode(".", $name);  
15.                     if(in_array($ext,$valid_formats))  
16.                     {  
17.                     if($size<(1024*1024))  
18.                         {  
19.                             $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;  
20.                             $tmp = $_FILES['photoimg']['tmp_name'];  
21.                             if(move_uploaded_file($tmp, $path.$actual_image_name))  
22.                                 {  
23.                                   
24.                                       
25.                                     echo "<img src='../upload/".$actual_image_name."'  class='preview'>";  
26.                                 }  
27.                             else  
28.                                 echo "failed";  
29.                         }  
30.                         else  
31.                         echo "Image file size max 1 MB";                      
32.                         }  
33.                         else  
34.                         echo "Invalid file format..";     
35.                 }  
36.                   
37.             else  
38.                 echo "Please select image..!";  
39.                   
40.             exit;  
41.         }  
42. ?>  

 

原文地址:http://www.freejs.net/article_biaodan_75.html