首页>>表单>>无刷新上传图片 可以实时预览 选择图片后即自动上传，没有上传按钮(2013-10-27)

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

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

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