zoukankan      html  css  js  c++  java
  • ajax 异步插入图片到数据库(多图上传)

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

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

    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呗。
    额 源码也有,找我就行 ,认准大白驴
  • 相关阅读:
    Kubernetes 系列(八):搭建EFK日志收集系统
    Kubernetes 系列(七):持久化存储StorageClass
    Kubernetes 系列(六):持久化存储 PV与PVC
    .Net Core自动化部署系列(三):使用GitLab CI/CD 自动部署Api到Docker
    Ocelot自定义管道中间件
    生产环境项目问题记录系列(二):Docker打包镜像Nuget包因权限问题还原失败
    .Net Core 商城微服务项目系列(十四):分布式部署携程Apollo构建配置中心
    IT人该如何未雨绸缪,不断提升自己的竞争力?同时尽量避免风险?
    Session跟Cookie简单的理解
    软件测试中高级面试提问
  • 原文地址:https://www.cnblogs.com/HoverM/p/4821741.html
Copyright © 2011-2022 走看看