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

ajaxImageUpload.php

 

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

标签