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

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

index.php

<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>

    <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>

</head>
<body>

<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="img/gd.gif" alt="Uploading...."/></div>
    <div id='imageloadbutton'>
        <input type="file" name="photos[]" id="photoimg" multiple="true" />
    </div>
</form>

</div>

</body>
</html>

ajaximageupload.php


<?php
error_reporting(0);
session_start();
include('conn.php');

$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;
}

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{

    $uploaddir = "/DoExercise/uploadimgs/image/"; //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*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>';
                }

            }
            else
            {
                echo '<span class="imgList">你已经超过了大小限制!</span>';

            }

        }
        else
        {
            echo '<span class="imgList">Unknown extension!</span>';

        }

    }
}

?>

就这些吧  想点击提交按钮 再提交也行 ，那就加个判断呗。什么时候点击确定按钮 触发了事件 就再走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. MyBatis传入参数为集合、数组SQL写法

    参考:http://blog.csdn.net/small____fish/article/details/8029030 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合 ...

  2. [转]CocoaPods安装和使用教程

    转载地址:http://code4app.com/article/cocoapods-install-usage 目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用Coco ...

  3. 在mac电脑上创建java的一些简单操作

    首先你要在电脑上下载一个JDK创造出一个java环境 如下第二个: 然后步奏如下: step1:苹果->系统偏好设置->最下边点MySQL 在弹出页面中 关闭mysql服务(点击stop ...

  4. ubuntu常见问题及解决

    1.反复关机后自动重启. 联网状态下输入以下命令. sudo apt-get install laptop-mode-tools 2.win和ubuntu双系统下,怎么修改启动顺序和等待时间? 1.开 ...

  5. 我的nodejs学习之路1

    距离上次写文章类东西已经有4-5年了,猛然写东西有种提笔忘字的感觉. 言归正传,这是一篇记录我自己学习nodejs的文章,在写下这篇文章的时候我也不是什么大牛,也不是很了解nodejs这项技术.之所以 ...

  6. zigbee学习之路(十三):基于协议栈的Usart 实验

    一.前言 这次实验我们来学习基于zigbee的串口通信实验,揭开zigbee神秘的面纱,让大家可以用zigbee协议编制属于自己的程序,这次实验只是串口发送数据,并没有进行无线的数据传输,为的是使大家 ...

  7. eval 简单应用

     --> 循环来定义变量 //想定义四个变量 one,two,three,four var initVar = ['one','two','three','four']; initVar.for ...

  8. mac终端命令大全介绍(转)

    OSX 的文件系统 OSX 采用的Unix文件系统,所有文件都挂在跟目录 / 下面,所以不在要有Windows 下的盘符概念. 你在桌面上看到的硬盘都挂在 /Volumes 下. 比如接上个叫做 US ...

  9. SLAM前端技术选择思考

    以前是专门做室内定位技术研究的,先后学习和分析了多种基于电磁的室内定位技术,如WiFi指纹定位(先后出现过RSSI.CTF.CIR多种指纹特征).WiFi ToF定位.低功耗蓝牙BLE以及iBeaco ...

  10. 关于ES3、ES5、ES6以及ES7所有数组的方法(api)的总结

    起因:工作用经常用到操作数组的方法,这里进行一下总结,我尽量以简洁的语言概括每个方法(api)的作用.如果您想快速定位,可以Control+F 然后搜相应的方法即可定位 :) ES3的数组方法 joi ...