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. javascrip 实现简单的计算器功能

    页面样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. js-js的语句

    - Java里面的语句: ** if判断 *** =:表示赋值 *** ==:表示判断 ** switch语句 ** 循环 for while do-while - js里面的也是这些语句 ** if ...

  3. 理解position：relative

    前言:position有5个属性:static.absolute.relative.fixed和inherit.本篇博客主要介绍relative属性,因为似乎很多人对这个属性的理解很模糊,而且不清楚r ...

  4. 解决ArcMap启动时只停留在初始化界面的方法

    方法1 修改环境变量TEMP和TMP为C:\Temp 重启ArcMap. 方法2 关闭系统进程Print Spooler. 打开C:\WINDOWS\system32\spool\PRINTERS,删 ...

  5. 如何在Ubuntu上安装gcc-6.3

    装显卡驱动推荐 gcc 6.3 版本,其实linux上多个版本的gcc是可以共存的,需要的的时候切换就好,参加之前的博客 https://www.cnblogs.com/jins-note/p/951 ...

  6. 我的CSDN博客&Github地址

    我的 CSDN 博客地址: https://blog.csdn.net/qq_40147863 Github 地址: https://github.com/xpwi

  7. LoadRunner对移动互联网后端服务器压力测试

    一.LoadRunner简介 LoadRunner,是惠普公司研发的一款预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadRunner能够 ...

  8. 如何查看服务器CPU核心数和线程数

    知道服务器CPU型号,那么我们如何在服务器里面查看服务器CPU核心数和线程数呢? 步骤: 先用鼠标右键点击屏幕最下方的任务栏空白处.会弹出一个菜单. 在菜单中用鼠标左键点选“启动任务管理器”. 点击任 ...

  9. Azure 订阅和服务限制、配额和约束

    最后更新时间:2016年10月24日 概述 本文档指定一些最常见的 Azure 限制.请注意,本文档目前未涵盖所有 Azure 服务.一段时间后,将展开并更新这些限制以包含多个平台. NOTE: 如果 ...

  10. Linux Samba配置文件常用参数详解

    目录 1.全局参数 2.共享参数   Samba的主配置文件叫smb.conf,默认在/etc/samba/目录下. smb.conf含有多个段,每个段由段名开始,直到下个段名.每个段名放在方括号中间 ...