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

废话不多说走码。。。。

<!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. Js实现MD5加密

    在页面中引用md5.js文件,调用方法为 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...

  2. 创建 maven 本地仓库

    在 pom.xml 添加依赖包的时候,有时候会提示无法从 http://repo1.maven.org/maven2/ 获取的情况,这时可配置个本地仓库: 从网上下载 maven 仓库网站源码包 Ne ...

  3. HDU 2955（0-1背包问题）

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87125#problem/M 题目: Description The aspir ...

  4. Android基于XMPP的即时通讯1-基本对话

    闲暇之余,自己写了个简单的即时通讯,基于OpenFire服务器平台. 整个项目包括两个部分,一个是服务器端,一个是android手机端: 一.关于服务器端没什么好说的,下载安装配置即可 推荐下载带ja ...

  5. hdu 小希的迷宫

    真是被这道并查集的水题给坑哭了...忘记给uset数组初始化我也是醉了. 题目意思是找到判断是不是连通无环的图,首先想到的就是并查集. 1判断成环的时候,只要判断输入边的两个点.有一个共同的父节点,那 ...

  6. spring security 管理会话 多个用户不可以使用同一个账号登录系统

    多个用户不能使用同一个账号同时登陆系统. 1. 添加监听器 在web.xml中添加一个监听器,这个监听器会在session创建和销毁的时候通知Spring Security. <listener ...

  7. IOS第13天(3,私人通讯录，登陆状态数据存储，数据缓存， cell的滑动删除，进入编辑模式，单个位置刷新 )

    *****联系人的界面的优化 HMContactsTableViewController.m #import "HMContactsTableViewController.h" # ...

  8. The Earth Mover's Distance

    The EMD is based on the minimal cost that must be paid to transform one distribution into the other. ...

  9. jquery ajax 对异步队列defer与XMLHttprequest.onload的依赖

    ajax 对异步队列defer与XMLHttprequest.onload的依赖

  10. GFS文件系统和在RedHat Linux下的配置

    GFS的全称是Google file System,为了满足Google迅速增长的数据处理要求,Google设计并实现的Google文件系统(GFS).Google文件系统是一个可扩展的分布式文件系统 ...