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

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

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

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

$session_id='1'; //$session iddefine ("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. JS案例之4——Ajax多图上传

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

  3. PHP之:多图上传

    撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...

  4. yii2组件之多图上传插件FileInput的详细使用

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  5. 微信jssdk,实现多图上传的一点心得

    一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...

  6. 上传图片,多图上传,预览功能,js原生无依赖

    最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...

  7. iOS 使用AFN 进行单图和多图上传

    图片上传时必要将图片进行压缩,不然会上传失败 1.单张图上传 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManag ...

  8. 微信企业号办公系统-JSSDK上传图片(多图上传)

    在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...

  9. thinkphp3.2.x多图上传并且生成多张缩略图

    html部分 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" con ...

随机推荐

  1. 如何在Elasticsearch中安装中文分词器(IK+pinyin)

    如果直接使用Elasticsearch的朋友在处理中文内容的搜索时,肯定会遇到很尴尬的问题--中文词语被分成了一个一个的汉字,当用Kibana作图的时候,按照term来分组,结果一个汉字被分成了一组. ...

  2. c语言函数指针

    #include <stdio.h> typedef void (*intFunc)(int i); void test1(int age) { printf("test1:%d ...

  3. 【九度OJ】题目1054:字符串内排序

    题目描述: 输入一个字符串,长度小于等于200,然后将输出按字符顺序升序排序后的字符串. 输入: 测试数据有多组,输入字符串. 输出: 对于每组输入,输出处理后的结果. 样例输入: bacd 样例输出 ...

  4. 深入JVM-Class装载系统

    一.Class文件的装载过程 Class类型通常以文件的形式存在(当然,任何二进制流都可以是Class类型),只有被Java虚拟机装载的Class类型才能在程序中使用.系统状态Class类型可以分为加 ...

  5. 《DSP using MATLAB》示例Example4.15

    代码: b = [1/3, 1/3, 1/3]; a = [1, -0.95, 0.9025]; % x(n) y(n) coefficient [R, p, C] = residuez(b,a) M ...

  6. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  7. Jquery操作select,radio,input,p之类

    select的操作 变化后触发操作 $("#txtaddprojecturl").change(function(){ $("#addprojectname") ...

  8. Win7系统下VS2008安装SP1补丁解决JQuery无智能提示的问题

    jQuery在vs2008中的智能提示 1  安装VS2008SP1补丁 要确保您的vs2008已经打了sp1补丁,在vs2008的帮助里的关于,要是安装了sp1,会出现“版本 3.5 sp1”,没安 ...

  9. 03-树2 List Leaves

    二叉树及其遍历 一遍AC,挺开心的hhh~ 简单讲下思路:叶子,顾名思义就是没有左右子树的结点.由于题目要求,叶子结点的输出顺序是从上往下,从左往右.所以用层序遍历法. 当然,这里先找到root树的根 ...

  10. 【Add binary】cpp

    题目: Given two binary strings, return their sum (also a binary string). For example,a = "11" ...