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

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

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. Bootstrap+PHP fileinput 实现多图上传 这是ajax上传,只能单张单张图片地上传

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

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

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

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

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

  5. js formData图片上传(单图上传、多图上传)后台java

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

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

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

  7. 百度Ueditor编辑器取消多图上传对话框中的图片搜索

    百度Ueditor确实是一个非常强悍的编辑器,功能强大!但是实际开发需求复杂,总会有各种不符合要求的,比如想要取消多图上传的“图片搜索”选项卡(这个图片搜索真心难用)! 以ueditor 1.4.3为 ...

  8. Bootstrap+PHP实现多图上传

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

  9. PHP之:多图上传

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

随机推荐

  1. reactor &amp; proactor 笔记

    1. 基本概念 1.1 同步/异步,针对应用程序和内核交互而言. 同步:进程触发IO操作等待或轮询查看IO操作是否完成: 异步:进程触发IO操作后仅需自身的处理,IO操作完成后会得到通知(异步的特点) ...

  2. 使用POI设置excel背景色

    HSSFCellStyle setBorder1 = workbook.createCellStyle(); HSSFFont font1 = workbook.createFont(); font1 ...

  3. WOL远程开机

    最近在一直都在研究PC机硬件和软件相结合的软件,硬件信息都是通过C++与驱动结合获取.对于一个好久都没有接触C++的人来说看这些东西太费劲了,必须的重新捡一下C++的基础知识,必然也少不了C知识,底层 ...

  4. easyUI API(version 1.5)

    不分先后,只做记录. jquery+easyui培训文档下载地址: 链接: https://pan.baidu.com/s/1dFgFXk9 密码: jj5d 1 easyui-draggable(拖 ...

  5. JS常见排序算法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. response.setContentType()的作用及参数

    package com.java1234.util; import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse ...

  7. 51nod1126(矩阵快速幂)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1126 题意:中文题诶- 思路:构造矩阵: ( 0, 1 )^ ...

  8. Java实现CORS跨域请求

    问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同 ...

  9. How to Conduct High-Impact Research and Produce High-Quality Papers

    How to Conduct High-Impact Research and Produce High-Quality Papers Contents From Slide Russell Grou ...

  10. JavaScript常见的创建对象的几种方式

    1.通过Object构造函数或对象字面量创建单个对象 这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,出现了工厂模式. 2.工厂模式 考虑在ES中无法创建类( ...