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. MYSQL建表问题（转）

    今天在dos下准备新建一个数据表,但一直出错,如下 后面在网上查了好久,终于找到了原因.创建 MySql 的表时,表名和字段名外面的符号 ` 不是单引号,而是英文输入法状态下的反单引号,也就是键盘左上 ...

  2. python，tensorflow线性回归Django网页显示Gif动态图

    1.工程组成 2.urls.py """Django_machine_learning_linear_regression URL Configuration The ` ...

  3. Linux 重置root密码

    1.首先输入:sudo passwd root(设置root密码) 2.输入当前系统的账户密码(账户:my的密码) 3.输入新的root密码,确认新 4.密码,密码更新成功 5.在提示符处输入:su按 ...

  4. FormData js对象的介绍和使用

    FormData js对象的介绍和使用 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用FormData对象可以减 ...

  5. C# 装箱和拆箱[整理](转)

    //1. // 装箱和拆箱是一个抽象的概念 //2. // 装箱是将值类型转换为引用类型 :拆箱是将引用类型转换为值类型 // 利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的值相互 ...

  6. Informatica 9.5安装部署

    Informatica  结构 1个或多个资源库(Respository) PowerCenter数据整合引擎是基于元数据驱动的,提供了基于数据驱动的元数据知识库(Repository),该元数据知识 ...

  7. 万能的JDBC工具类。通过反射机制直接简单处理数据库操作

    package com.YY.util; import java.io.IOException; import java.io.InputStream; import java.sql.Connect ...

  8. MVC controller的Action获取HttpRequest

    HttpContext.ApplicationInstance.Context.Request

  9. Java 8 Date-Time API概览

    更新时间:2018-04-19 根据网上资料整理 java 8增加了新的Date-Time API (JSR 310),增强对日期与时间的处理.它在很大程度上受到Joda-Time的影响.之前写过一篇 ...

  10. Java学习---程序设计_面试题[2]

    百度2017春招笔试真题编程题集合之买帽子 // 2017-10-09 // 题目描述 // 度度熊想去商场买一顶帽子,商场里有N顶帽子,有些帽子的价格可能相同.度度熊想买一顶价格第三便宜的帽子,问第 ...