1.html

<!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="js/jquery-1.10.2.min.js"></script>

        <style type="text/css">

        #feedback{

            height: 200px;

            text-align: center;

            height: 160px;

            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 (feedback.children('img').length>1) {

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

        return false;

    }

        //创建FormData对象

        var data = new FormData();

        //为FormData对象添加数据

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

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

        });

        $(".loading").show();    //显示加载图片

        //发送数据

        $.ajax({

            url:'up.php', /*去过那个php文件*/

            type:'POST',  /*提交方式*/

            data:data,

            cache: false,

            contentType: false,        /*不可缺*/

            processData: false,         /*不可缺*/

            success:function(data){

                data = $(data).html();        /*转格式*/

                //第一个feedback数据直接append，其他的用before第1个（ .eq(0).before() ）放至最前面。

                //data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 转换html标签，否则图片无法显示。

                if($("#feedback").children('img').length == 0)

                {

                 $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));

                }

                else{

                    $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));

                }

            },

            error:function(){

                alert('上传出错');

            }

        });

    });

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

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

    });

});

</script>

</body>

</html>

2.up.php

<?php

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

    $dir_base = "./files/";     //文件上传根目录

    //没有成功上传文件，报错并退出。

    $output = "<textarea>";

    $index = 0;        //$_FILES 以文件name为数组下标，不适用foreach($_FILES as $index=>$file)

    foreach($_FILES as $file){

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

        $filename = $_FILES[$upload_file_name]['name'];

        $gb_filename = iconv('utf-8','gb2312',$filename);    //名字转换成gb2312处理

        //文件不存在才上传

        if(!file_exists($dir_base.$gb_filename)) {

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

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

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

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

                preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {

                $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);        //上传文件

            }

        }else{

            $isMoved = true;    //已存在文件设置为上传成功

        }

        if($isMoved){

            //输出图片文件<img>标签

            //注：在一些系统src可能需要urlencode处理，发现图片无法显示，

            //请尝试 urlencode($gb_filename) 或 urlencode($filename)，不行请查看HTML中显示的src并酌情解决。

            $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";

        }else {

            //上传失败则把error.jpg传回给前端

            $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";

        }

        $index++;

    }

    echo $output."</textarea>";

//End_php

3.运行效果

             

　　在指定的目录下已经有刚刚上传的2张图片

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

  1. ssm使用Ajax的formData进行异步图片上传返回图片路径，并限制格式和大小

    之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...

  2. asp.net core 通过ajax上传图片及wangEditor图片上传

    asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...

  3. 原生JS实现异步图片上传（预览）

    效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...

  4. 基于THINKPHP+layui+Ajax无刷新实现图片上传预览

    <fieldset class="layui-elem-field" style="width:500px;margin:50px 0 0 300px;" ...

  5. 在php中使用jquery uploadify进行多图片上传

    jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...

  6. 图片上传并回显Ajax异步篇

    图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...

  7. ajax图片上传及FastDFS入门案例.

    今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...

  8. larave异步多图片上传的实现和注意事项及$file的对象函数

    要使用多图片上传,首先要在input添加multipart,同时注意name的参数要加[],不然,不算是数组.具体如下,注意绿色地方.如果是单张图片,把[]去掉,不要multiple; <inp ...

  9. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

随机推荐

  1. CSS核心内容：层叠和继承

    实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...

  2. Python爬虫教程-01-爬虫介绍

    Spider-01-爬虫介绍 Python 爬虫的知识量不是特别大,但是需要不停和网页打交道,每个网页情况都有所差异,所以对应变能力有些要求 爬虫准备工作 参考资料 精通Python爬虫框架Scrap ...

  3. C语言中关键词static的用法与作用域

    一.面向过程设计中的static 转载:http://blog.csdn.net/celerylxq/article/details/6160499 1.静态全局变量 在全局变量前,加上关键字stat ...

  4. axios 同步问题

    Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中(这是官方文档给出的一个解释说明) 它的主要作用是向后台发起异步请求,还有在请求中做更多的可控功能 1. ...

  5. MySQL事务管理

    事务就是一组原子性的SQL查询,或者说一个独立的工作单元.如果数据库引擎能够成功地对数据库应用该组查询的全部语句,那么就执行该组的全部语句,如果其中有任何一条语句因为崩溃或者其他原因无法执行,那么所有 ...

  6. Mysql rpm安装

    总结下mysql rpm安装的方式,与一些错误 环境[root@host2 ~]# uname -aLinux host2 2.6.32-504.3.3.el6.x86_64 #1 SMP Wed D ...

  7. 用POP动画编写带富文本的自定义动画效果

    用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...

  8. Windows事件--重复事件检测

    监视器--Windows事件--重复事件检测--计时器重置: 自动重置计时器:指定等待时间10分钟,则在10分钟后自动关闭该警报,更改状态为 正常(绿色) 检测事件1,事件3重置计数器状态,2分钟内检 ...

  9. 大数据实时计算工程师/Hadoop工程师/数据分析师职业路线图

    http://edu.51cto.com/roadmap/view/id-29.html http://my.oschina.net/infiniteSpace/blog/308401 大数据实时计算 ...

  10. Java学习---Map的学习

    1. Map 1.1. map中的方法 1.2. Map.Entry 对于集合来讲,就是把kye-value的数据保存在了Map.Entry的实例之后,再在Map集合中插入了一个Map.Entry的实 ...