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. JS获取今天年月日

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

  2. git杂记-打标签

    列出标签 $ git tag v0. v1. 创建标签 --添加附注标签(推荐):加上-a选项(annotated) $ git tag -a v1. -m 'my version 1.4' --添加 ...

  3. JavaScript周报#185

    This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 185Ju ...

  4. log4net.dll添加报错

    描述: 新建项目Log4Net类库项目,添加log4net.dll,封装Log类对日志进行操作 新建webForm项目添加Log4Net类库生成的dll生成日志,页面报错,未能加载文件或程序集log4 ...

  5. 【html/css】模态框的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JAVA后台框架优化之日志篇

    1.日志规范 各业务系统日志需要统一,以方便查看.收集日志, 日后统一ELK日志管理,以下为项目的日志配置, 这是兼容当前系统的日志,以后推行微服架构时会有变动,但日志存放方式不会改变,日后会推行sp ...

  7. 比较和排序（IComparable和IComparer以及它们的泛型实现）(转)

    C#笔记25:比较和排序(IComparable和IComparer以及它们的泛型实现) 本文摘要: 1:比较和排序的概念: 2:IComparable和IComparer: 3:IComparabl ...

  8. 五、python小功能记录——打包程序

    使用pyinstaller打包Python程序 安装工具 :pip3 install pyinstaller 在Python程序文件夹上(不点进去)按住shift并且右键,在弹出的选项中点击" ...

  9. 让图片左右缓慢移动的MoveView

    让图片左右缓慢移动的MoveView 效果: 源码: MoveView.h 与 MoveView.m // // MoveView.h // AnimationView // // Created b ...

  10. 中文乱码（Python、WEB、ajax）

    http://my.oschina.net/leejun2005/blog/74430 #查看errorb是unicode,还是stringprint isinstance(errorb,unicod ...