目的当然还是为了提高用户的体验度嘛，，

废话不多说走码。。。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #jdt{ width:300px; height:25px; }

        progress{ display:none;  width:200px; height:25px;  float:left;  }

        #sd{ float:left;  }

    </style>

    <script>

        function selefile(){

            //创建FormData对象

            var fd = new FormData();

            //获取文件对象

            var pic = document.getElementsByTagName('input')[0].files[0];

            //把文件内容追加到表单数据里

            fd.append('pic',pic);

            //创建xmlhttprequest对象

            var xhr = new XMLHttpRequest();

            //打开

            xhr.open('POST','12.php',true);

            //利用xhr2的新标准，为上传过程写自定义一个函数

            xhr.upload.onprogress = function(event){

                 if(event.lengthComputable){

                     //获取他的百分比

                     var bfb = 100 * event.loaded / event.total;

                     var bfbtwo = Math.ceil(bfb);

                     var pro = document.getElementsByTagName('progress')[0];

                     pro.style.display = 'block';

                     pro.setAttribute('value',bfbtwo);

                     var sd = document.getElementById('sd');

                     sd.innerHTML = bfbtwo +'%';

                 }

            }

            //接收返回值

            xhr.onreadystatechange = function(){

                if(this.readyState == 4){

                    document.getElementById('desc').innerHTML = this.responseText;

                }

            }

            //发送fd给后端

            xhr.send(fd);

        }

    </script>

</head>

<body>

    <div id="jdt"><progress max="100" value=""></progress><span id="sd"><span></div>

    <input type="file" name="pic" onchange="selefile();" >

    <div id="desc"></div>

</body>

</html>

<?php

    //print_r($_FILES);

    if(empty($_FILES)){

        exit('No file');

    }

    if($_FILES['pic']['error'] != 0){

        exit('no file');

    }

    $picaddress = 'upload/'.time().rand();

    move_uploaded_file($_FILES['pic']['tmp_name'],$picaddress.'.jpg');

    echo 'OK';

效果如下所示：

AJAX-----15HTML5实现进度条上传的更多相关文章

  1. PHP+ajaxForm异步带进度条上传文件实例

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...

  2. ajax-属性、原理、实现html5进度条上传文件

    一.远古ajax实现方式如下: 1.前端请求后台,后台设置返回 http状态码204 2.运用img图片(或css/javascript等)的加载机制,请求后台 3.post提交数据,运用iframe ...

  3. ajax利用html5新特性带进度条上传文件

    http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...

  4. Ajax实现带进度条的文件上传

    Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...

  5. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  6. Winform之跨线程访问控件(在进度条上显示字体)

    此文章对于遇到必须使用线程但是没有办法在线程内操作控件的问题的处理  有很好的解决方案(个人认为的.有更好的方案欢迎交流.) 在做跨线程访问之前我们先了解下我们所做的需要达到的效果: 这个是批量的将x ...

  7. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  8. Ajax+PHP实现异步图片上传

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

  9. Ajax的原理及Django上传组件

    title: Ajax的原理及Django上传组件 tags: Django --- Ajax的原理及Django上传组件 Ajax的原理 ajax 是异步JavaScript和xml ajax就是向 ...

随机推荐

  1. 最新Velocity使用和Velocity语法

    Velocity语法 Velocity的使用要用到下面几个包,可以从官网下载,commons-collections.jar,velocity-1.4.jar,velocity-dept.jar; 1 ...

  2. 在MacOS和iOS系统中使用OpenCV

    在MacOS和iOS系统中使用OpenCV 前言 OpenCV 是一个开源的跨平台计算机视觉库,实现了图像处理和计算机视觉方面的很多通用算法. 最近试着在 MacOS 和 iOS 上使用 OpenCV ...

  3. JQuery的动画及其幻灯片效果

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  4. 【android studio】android studio使用过程中，搜集的一些问题

    1.[知乎]在Android Studio中如何将依赖的jar包放在SDK的android.jar前? 在编译原生Contacts应用时需用到非公开的API,需要引入framework等jar包,但在 ...

  5. power 做表

    drop table "USER" cascade constraints; /*================================================= ...

  6. Centos 6.5 挂载硬盘 4K对齐 （笔记 实测）

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Linux centos 2.6.32-431.17.1.el6.x86_64(Centos-6.5-x86_ ...

  7. Listener监听器使用小案例

    这里介绍的就是一个客户流失监听器案例 新建一个监听器实现ServletContextListener接口 覆写contextDestroyed和contextInitialized 方法 packag ...

  8. sql 执行 delete 的时候，结合子查询 exists ，怎样支持别名呢？

    在做一个数据删除的时候,条件需要用到关联其他表,用到子查询,但是查询的时候使用 别名 没有问题,但是删除就有语法错误,在网上查询后得到了完美解决: --查询出来需要删除的数据 select * fro ...

  9. js的关联数组

    我自己感觉js是不支持关联数组的,只有索引数组.想要实现js关联数组的效果,就使用js的对象,使用键值对.如果对数组动态处理用push函数,取值用pop函数.此外,对数组操作有几个比较好的函数,joi ...

  10. DG配置实验

    1.配置主库环境 2.为备库创建备份文件 3.启动主备库验证配置 4.DG测试 5.DG主备库切换 6.DG主备库第二次切换