额 大概就这么个样子。。。截个图

点浏览  选择几张图片 选择完了 确定一下 然后插入数据库 同时在页面中显示插入的图片，代码 也没啥。看下

index.php

  1. <html>
    <head>
        <title>多图上传来咯</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://www.freejs.net/demo/99/js/jquery.min.js" type="text/javascript"></script>
        <script src="http://www.freejs.net/demo/99/js/jquery.wallform.js" type="text/javascript"></script>
  2.  
  3.     <script>
            $(document).ready(function() {
  4.  
  5.             $('#photoimg').die('click').live('change', function()           {
                    //$("#preview").html('');
  6.  
  7.                 $("#imageform").ajaxForm({target: '#preview',
                        beforeSubmit:function(){
  8.  
  9.                         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();
  10.  
  11.             });
            });
        </script>
  12.  
  13. </head>
    <body>
  14.  
  15. <div id='preview'>
    </div>
  16.  
  17. <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="img/gd.gif" alt="Uploading...."/></div>
        <div id='imageloadbutton'>
            <input type="file" name="photos[]" id="photoimg" multiple="true" />
        </div>
    </form>
  18.  
  19. </div>
  20.  
  21. </body>
    </html>
  22.  
  23. ajaximageupload.php
  1.  
  2. <?php
    error_reporting(0);
    session_start();
    include('conn.php');
  3.  
  4. $session_id='1'; //$session id
    define ("MAX_SIZE","90000000");
    function getExtension($str)
    {
        $i = strrpos($str,".");
        if (!$i) { return ""; }
        $l = strlen($str) - $i;
        $ext = substr($str,$i+1,$l);
        return $ext;
    }
  5.  
  6. $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
    {
  7.  
  8.     $uploaddir = "/DoExercise/uploadimgs/image/"; //a directory inside
        foreach ($_FILES['photos']['name'] as $name => $value)
        {
  9.  
  10.         $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);
  11.  
  12.         if(in_array($ext,$valid_formats))
            {
                if ($size < (MAX_SIZE*1024*10))
                {
                    $image_name=time().$filename;
                    echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
                    $newname=$uploaddir.$image_name;
                    echo $newsname;
                    if (move_uploaded_file($_FILES['photos']['tmp_name'][$name],$_SERVER['DOCUMENT_ROOT'].$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">你已经超过了尺寸限制! so moving unsuccessful! </span>';
                    }
  13.  
  14.             }
                else
                {
                    echo '<span class="imgList">你已经超过了大小限制!</span>';
  15.  
  16.             }
  17.  
  18.         }
            else
            {
                echo '<span class="imgList">Unknown extension!</span>';
  19.  
  20.         }
  21.  
  22.     }
    }
  23.  
  24. ?>
  25.  
  26. 就这些吧  想点击提交按钮 再提交也行 ，那就加个判断呗。什么时候点击确定按钮 触发了事件 就再走insert呗。
    额 源码也有，找我就行 ，认准大白驴

ajax 异步插入图片到数据库（多图上传）的更多相关文章

  1. ajax 异步插入图片到数据库（单图上传）

    其实也没啥  如图: 点击按钮选择图片,选择完成后 无需点击确定 ,自动上传到服务器指定文件夹 然后插入到数据库中. 下面来看看这要代码 index.php <!DOCTYPE HTML> ...

  2. Bootstrap+PHP fileinput 实现多图上传 这是ajax上传，只能单张单张图片地上传

    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...

  3. java插入图片到数据库(可以批量)

    package sundun.zfpt.gg.web; import java.io.File; import java.io.FileInputStream; import java.sql.Con ...

  4. 多图上传控制器及模型代码（2）thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  5. thinkphp+layui多图上传（1）thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  6. JS案例之4——Ajax多图上传

    近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...

  7. 项目总结21：项目总结21：input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  8. js formData图片上传（单图上传、多图上传）后台java

    单图上传 <div class="imgUp">     <label>头像单图</label>     <input type=&quo ...

  9. iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片，压缩图片

    图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...

随机推荐

  1. wps使用技巧

    1.和word一样的文档结构图: 视图->文档结构图 (不是导航窗格) 2.粘贴时,出现乱码: WPS->选项->默认粘贴方式:无格式文本. 3.浏览当前文档所在目录: 在WPS的标 ...

  2. 【转】创建SVN仓库的步骤

    转载地址:http://www.cnblogs.com/ivan0626/p/3783053.html   今天在客户现场联调,两个开发人员之间的代码想用SVN来管理,所以就临时在本地机器上搭建一个S ...

  3. 笔记汇总.md

    ```javascript 1.js对象,value的值取不到,试着将引入的js文件放到body的后面 $("input[type='time']").change( functi ...

  4. Instantaneous Transference--POJ3592Tarjan缩点+搜索

    Instantaneous Transference Time Limit: 5000MS Memory Limit: 65536K Description It was long ago when ...

  5. c++中的重载(Overload)、覆盖(重写,Override) 、隐藏与using声明

    这些概念有时记住了,但可能没多久就忘了,还是记下来吧.网上找的一篇不错:这里  1 重载与覆盖 成员函数被重载的特征: (1)相同的范围(在同一个类中,不包括继承来的): (2)函数名字相同: (3) ...

  6. 源码剖析——深入Windows句柄本质

    参考资料: 1. http://www.codeforge.cn/read/146318/WinDef.h__html windef.h头文件 2. http://www.codeforge.cn/r ...

  7. 使用xfire工具搭建webservice

    一个简单的项目,下载下来导入可以直接使用 https://yunpan.cn/cY8ANUAYLgy7s  访问密码 99e3

  8. js的match()方法介绍

    定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. ...

  9. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  10. 1012. The Best Rank (25)

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...