Ajax+PHP实现异步上传多张图片

HTML代码

<!--

date: 2018-04-27 13:46:55

author: 王召波

descride: 多张图片上传

-->

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>Ajax+PHP实现异步上传多张图片</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

    <style type="text/css">

        #feedback{

            min-height: 200px;

            text-align: center;

            border: 1px solid silver;

            border-radius: 3px;

        }

        #feedback img{

            margin:3px 10px;

            border: 1px solid silver;

            border-radius:3px;

            padding: 6px;

            width: 35%;

            height: 85%;

        }

        #feedback p{

            font-family: "微软雅黑";

            line-height: 120px;

            color: #ccc;

        }

        .file {

            position: relative;

            display: inline-block;

            border: 1px solid #1ab294;

            border-radius: 4px;

            padding: 8px 16px;

            overflow: hidden;

            color: #fff;

            text-decoration: none;

            text-indent: 0;

            line-height: 20px;

            color: #1ab294;

            }

        .file input {

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

        }

        .box{

            margin-top: 10px;

            text-align: center;

        }

        .box a{

            margin-left: 10px;

        }

    </style>

</head>

<body>

    <!-- 响应返回数据容器 -->

    <div id="feedback">

    </div>

    <div class="box">

        <a href="javascript:;" class="file">选择图片

            <input type="file" multiple="multiple" id="inputfile" name="" class="photo">

        </a>

        <a href="javascript:;" class="file close">重新选择

            <input type="buttom" class="photo">

        </a>

    </div>

<script type="text/javascript">

$(document).ready(function(){

    //响应文件添加成功事件

    var feedback = $("#feedback");

    $("#inputfile").change(function(){

        if (this.files.length>2) {

            alert("最多只能选择两张图片");

            return false;

        }

        //创建FormData对象

        var data = new FormData();

        //为FormData对象添加数据

        $.each($('#inputfile')[0].files, function(i, file) {

            data.append('ruoshui'+i, file);

        });

        //追加其他数据

        data.append('id',1);

        //发送数据

        $.ajax({

            url:'./upload.php',

            type:'post',

            data:data,

            dataType:'json',

            cache: false,

            contentType: false,

            processData: false,

            // contentType: false 和processData: false，这两个参数是为了设置ajax对file文件对象进行序列化

            success:function(data){

                var str = '';

                $.each(data,function(i,n){

                    str +='<img src="'+n+'">';

                });

                $("#feedback").append(str);

            },

            error:function(){

                alert('上传出错');

            }

        });

    });

    $(".close").on("click",function(){

        $("#feedback").empty();

    });

});

</script>

</body>

</html>

PHP代码

<?php

/**

 * date: 2018-04-27 13:46:55

 * author: 王召波

 * descride: 多张图片上传

 */

header('content-type:text/html charset:utf-8');

$baseUrl = "./";

$picArr = "";

$index = 0;

foreach($_FILES as $file){

    $picName = 'ruoshui' . $index;//对应index.html FomData中的文件命名

    $fileName = $_FILES[$picName]['name'];

    //文件不存在才上传

    if(!file_exists($baseUrl.$fileName)) {

        $isMoved = false;  //默认上传失败

        $MAXIMUM_FILESIZE = 1 * 1024 * 1024;//文件大小限制1M = 1 * 1024 * 1024 B;

        $picType = "/^\.(jpg|jpeg|gif|png){1}$/i";

        if ($_FILES[$picName]['size'] <= $MAXIMUM_FILESIZE &&

            preg_match($picType, strrchr($fileName, '.'))) {

            $isMoved = @move_uploaded_file ( $_FILES[$picName]['tmp_name'], $baseUrl.$fileName);//上传文件

        }

    }

    $picArr[] = $baseUrl.$fileName;

    $index++;

}

echo json_encode($picArr);

效果图

Ajax+PHP实现异步上传多张图片的更多相关文章

  1. Ajax表单异步上传（包括文件域）

    起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...

  2. Ajax使用formdata异步上传文件，报错the request was rejected because no multipart boundary was found

    基于jQuery的Ajaxs使用FormData上传文件要注意两个参数的设定 processData设为false 把processData设为false,让jquery不要对formData做处理, ...

  3. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  4. Struts2学习（四）利用ajax异步上传

    上一篇说到怎样在struts2中进行上传下载.我们使用了struts的标签通过表单提交的方式,但大家知道表单提交会造成页面总体的刷新,这样的方式很不友好,那我们今天就来说说怎样结合ajax方式进行异步 ...

  5. php用jquery-ajax上传多张图片限制图片大小

    php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...

  6. ajax异步上传到又拍云的实例教程

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

  7. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  8. MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  9. java使用xheditor Ajax异步上传错误

    java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...

随机推荐

  1. mysql5.7 参数记录 （持续更新）

    sync_binlog 控制数据库的binlog刷到磁盘 默认sync_binlog=1,表示每次事务提交,MySQL都会把binlog刷下去,是最安全但是性能损耗最大的设置. sync_binlog ...

  2. python-异常处理、元类

    一.异常处理 1.异常处理介绍: 异常是错误发生的信号,一旦程序出错就会产生一个异常,如果该异常没有被应用程序处理,那么该异常就会被抛出来,程序执行随之停止 2.异常通常包含三个部分 1.traceb ...

  3. Codeforces 446C DZY Loves Fibonacci Numbers [线段树，数论]

    洛谷 Codeforces 思路 这题知道结论就是水题,不知道就是神仙题-- 斐波那契数有这样一个性质:\(f_{n+m}=f_{n+1}f_m+f_{n}f_{m-1}\). 至于怎么证明嘛-- 即 ...

  4. 软件测试-历史bug回顾（持续更新~）

    1.第一次编写程序的时候非常不容易看出的错误就是 = 和 == 的区别. 赋值符号,判断符号之间有着天差地别.导致一直循环错误,一直苦苦找寻愿意无果,一步步看代码解决. 2.对于终结条件判断不是很清楚 ...

  5. Confluence 6 配置 简易信息聚合（RSS）

    一个 Confluence 的管理员可以配置下面的 RSS 特性: Confluence 针对 RSS 聚合返回的最大项目数量. Confluence 针对 RSS 聚合允许的最大时间周期. 上面两个 ...

  6. 【batch】批处理文件多参数处理和for循环字符串连接

    batch文件写起来,酸爽不谈了.[1]今天在github上发现个好东西batsh,运行地址:https://batsh.org/.[1] 这里需求的场景是:调用run.bat脚本并传入多个参数(相对 ...

  7. SELinux简介(转载）

    几乎可以肯定每个人都听说过 SELinux (更准确的说,尝试关闭过),甚至某些过往的经验让您对 SELinux 产生了偏见.不过随着日益增长的 0-day 安全漏洞,或许现在是时候去了解下这个在 L ...

  8. Java 8 中的 Lambda 表达式

    Lambda 表达式是 Java 8 最受欢迎的功能.人们将函数式编程的概念引入了 Java 这门完全面向对象的命令式编程语言. 关于函数式编程是如何运作的,这个话题超出了本文的范围,不过我们会提炼出 ...

  9. 【python】获取http响应

    一个相对完整的http请求,输入ip和端口,输出响应码,响应头,响应体,是否超时,以及出错时的错误信息 处理包括: 1.协议处理,如果是443用https,其他用http 2.HTTPError处理, ...

  10. 【kafka】设置指定topic和group_id消耗的offset

    该博文方法有问题,正确方案在http://www.cnblogs.com/dplearning/p/7992994.html 背景: 搭建了一个kafka集群,建立了topic test,用group ...