首页>>表单>>jQuery ajax 无刷新多图片上传并记录到数据库(2013-11-07)

jQuery ajax 无刷新多图片上传并记录到数据库

本例适合多图片自动选择后上传，无提交按钮，并记录到数据库

数据库的结构

CREATE TABLE `user_uploads` (

  `upload_id` int(11) NOT NULL auto_increment,

  `image_name` text collate utf8_unicode_ci,

  `user_id_fk` int(11) default NULL,

  `created` int(11) default NULL,

  PRIMARY KEY  (`upload_id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

jQuery ajax 无刷新多图片上传并记录到数据库
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

JavaScript Code
  1. <script>  
  2.  $(document).ready(function() {   
  3.           
  4.             $('#photoimg').die('click').live('change', function()           {   
  5.                        //$("#preview").html('');  
  6.                   
  7.                 $("#imageform").ajaxForm({target: '#preview',   
  8.                      beforeSubmit:function(){   
  9.                       
  10.                     console.log('ttest');  
  11.                     $("#imageloadstatus").show();  
  12.                      $("#imageloadbutton").hide();  
  13.                      },   
  14.                     success:function(){   
  15.                     console.log('test');  
  16.                      $("#imageloadstatus").hide();  
  17.                      $("#imageloadbutton").show();  
  18.                     },   
  19.                     error:function(){   
  20.                     console.log('xtest');  
  21.                      $("#imageloadstatus").hide();  
  22.                     $("#imageloadbutton").show();  
  23.                     } }).submit();  
  24.                       
  25.           
  26.             });  
  27.         });   
  28. </script>  
XML/HTML Code
  1. <div id='preview'>  
  2. </div>  
  3.       
  4. <form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">  
  5. <h1>请选择图片上传，多图片可以上传</h1>   
  6. <div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>  
  7. <div id='imageloadbutton'>  
  8. <input type="file" name="photos[]" id="photoimg" multiple="true" />  
  9. </div>  
  10. </form>  
  11.   
  12.   
  13. </div>  

 ajaxImageUpload.php

 

PHP Code
  1.  <?php  
  2. error_reporting(0);  
  3. session_start();  
  4. include('conn.php');  
  5.   
  6. $session_id='1'; //$session id  
  7. define ("MAX_SIZE","9000");   
  8. function getExtension($str)  
  9. {  
  10.          $i = strrpos($str,".");  
  11.          if (!$i) { return ""; }  
  12.          $l = strlen($str) - $i;  
  13.          $ext = substr($str,$i+1,$l);  
  14.          return $ext;  
  15. }  
  16.   
  17.   
  18. $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");  
  19. if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")   
  20. {  
  21.       
  22.     $uploaddir = "../upload/"; //a directory inside  
  23.     foreach ($_FILES['photos']['name'] as $name => $value)  
  24.     {  
  25.       
  26.         $filename = stripslashes($_FILES['photos']['name'][$name]);  
  27.         $size=filesize($_FILES['photos']['tmp_name'][$name]);  
  28.         //get the extension of the file in a lower case format  
  29.           $ext = getExtension($filename);  
  30.           $ext = strtolower($ext);  
  31.           
  32.          if(in_array($ext,$valid_formats))  
  33.          {  
  34.            if ($size < (MAX_SIZE*1024))  
  35.            {  
  36.            $image_name=time().$filename;  
  37.            echo "<img src='".$uploaddir.$image_name."' class='imgList'>";  
  38.            $newname=$uploaddir.$image_name;  
  39.              
  40.            if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname))   
  41.            {  
  42.            $time=time();  
  43.            mysql_query("INSERT INTO user_uploads(image_name,user_id_fk,created) VALUES('$image_name','$session_id','$time')");  
  44.            }  
  45.            else  
  46.            {  
  47.             echo '<span class="imgList">You have exceeded the size limit! so moving unsuccessful! </span>';  
  48.             }  
  49.   
  50.            }  
  51.            else  
  52.            {  
  53.             echo '<span class="imgList">You have exceeded the size limit!</span>';  
  54.             
  55.            }  
  56.          
  57.           }  
  58.           else  
  59.          {   
  60.             echo '<span class="imgList">Unknown extension!</span>';  
  61.              
  62.          }  
  63.              
  64.      }  
  65. }  
  66.   
  67. ?>  

 


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