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

javacoffe

2013-11-27

关注关注

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

数据库的结构

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 ;

演示

JavaScript Code
<script>  
 $(document).ready(function() {   
          
            $('#photoimg').die('click').live('change', function()           {   
                       //$("#preview").html('');  
                  
                $("#imageform").ajaxForm({target: '#preview',   
                     beforeSubmit:function(){   
                      
                    console.log('ttest');  
                    $("#imageloadstatus").show();  
                     $("#imageloadbutton").hide();  
                     },   
                    success:function(){   
                    console.log('test');  
                     $("#imageloadstatus").hide();  
                     $("#imageloadbutton").show();  
                    },   
                    error:function(){   
                    console.log('xtest');  
                     $("#imageloadstatus").hide();  
                    $("#imageloadbutton").show();  
                    } }).submit();  
                      
          
            });  
        });   
</script>  

XML/HTML Code
<div id='preview'>  
</div>  
      
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">  
<h1>请选择图片上传，多图片可以上传</h1>   
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>  
<div id='imageloadbutton'>  
<input type="file" name="photos[]" id="photoimg" multiple="true" />  
</div>  
</form>  
  
  
</div>  

ajaxImageUpload.php

PHP Code
 <?php  
error_reporting(0);  
session_start();  
include('conn.php');  
  
$session_id='1'; //$session id  
define ("MAX_SIZE","9000");   
function getExtension($str)  
{  
         $i = strrpos($str,".");  
         if (!$i) { return ""; }  
         $l = strlen($str) - $i;  
         $ext = substr($str,$i+1,$l);  
         return $ext;  
}  
  
  
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");  
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")   
{  
      
    $uploaddir = "../upload/"; //a directory inside  
    foreach ($_FILES['photos']['name'] as $name => $value)  
    {  
      
        $filename = stripslashes($_FILES['photos']['name'][$name]);  
        $size=filesize($_FILES['photos']['tmp_name'][$name]);  
        //get the extension of the file in a lower case format  
          $ext = getExtension($filename);  
          $ext = strtolower($ext);  
          
         if(in_array($ext,$valid_formats))  
         {  
           if ($size < (MAX_SIZE*1024))  
           {  
           $image_name=time().$filename;  
           echo "<img src='".$uploaddir.$image_name."' class='imgList'>";  
           $newname=$uploaddir.$image_name;  
             
           if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname))   
           {  
           $time=time();  
           mysql_query("INSERT INTO user_uploads(image_name,user_id_fk,created) VALUES('$image_name','$session_id','$time')");  
           }  
           else  
           {  
            echo '<span class="imgList">You have exceeded the size limit! so moving unsuccessful! </span>';  
            }  
  
           }  
           else  
           {  
            echo '<span class="imgList">You have exceeded the size limit!</span>';  
            
           }  
         
          }  
          else  
         {   
            echo '<span class="imgList">Unknown extension!</span>';  
             
         }  
             
     }  
}  
  
?>  