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

废话不多说走码。。。。

<!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. Idea_Intellij Idea 12 生成serialVersionUID的方法

    默认情况下Intellij IDEA是关闭了继承了java.io.Serializable的类生成serialVersionUID的警告.如果需要ide提示生成serialVersionUID,那么需 ...

  2. hbase的查询scan功能注意点（setStartRow, setStopRow）

    来自http://hi.baidu.com/7636553/blog/item/982beb17713bc004972b43ee.html hbase的scan查询功能注意项: Scan scan = ...

  3. 史上最全的Win8快捷键大全

    下列的 Win8 快捷键列表汇总均收集自网络,未全部实测,也有可能有Win7时代的热键混迹其中,不管怎样,如有错漏,欢迎大家指正! Win8 常用快捷键: Win键 可在开始屏幕主菜单及最后一个应用程 ...

  4. EasyUI组件（窗口组件）

    注意首先要在title后面导入配置文件,前后顺序不能乱 <!-- 1.jQuery的js包 --><script type="text/javascript" s ...

  5. crontab的坑

    1. 命令  全路径 (eg:which mysql) 2.执行脚本  (脚本中加上#!/bin/bash) eg: /bin/bash script.sh 3. 输出信息(>>) 使用全 ...

  6. ASP.NET发布后,功能不响应

    题记:稀奇古怪的错误,往往是由低级脑残错误产生的 ASP.NET网站,本地调试一切正常.部署到服务器后,结果登陆按钮就卡住了,点击就是没反应. 浏览器显示Internal Server Error 5 ...

  7. js 获取中文的拼音

    es6 + 模块化封装 "use strict"; module.exports = { //参数,中文字符串 //返回值:拼音首字母串数组 makePy (str) { if ( ...

  8. 修改ArcGIS Server Account / 站点管理员的 账号、密码

    安装ArcGIS Server(10.1之后版本)时会先后创建两个账户:ArcGIS Server Account和站点管理账户 ArcGIS Server Account 是操作系统账户,Serve ...

  9. css before&after 特殊用途

    平常仅仅需要将这两个伪元素用于添加一些自定义字符 p:before  {content:"hello"} 但我们还可以使用before&after这两个伪类做一些特殊效果 ...

  10. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...