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

废话不多说走码。。。。

<!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. 浅析Spring中的注解

    Spring的配置,通常有两种:使用配置文件和注解.那么Spring如何知道各个Bean或者Service.Controller以及Bean中各类属性之间的关系呢?答案肯定是在定义各个Java文件的时 ...

  2. Objective-C的新特性

    Objective-C的新特性 苹果在今年的 WWDC2012 大会上介绍了大量 Objective-C 的新特性,能够帮助 iOS 程序员更加高效地编写代码.在不久前更新的 Xcode4.4 版本中 ...

  3. List相关知识点.......课堂加整理

    package lis0924; //接口List(列表) import java.util.ArrayList; import java.util.Iterator; import java.uti ...

  4. JAVA中序列化和反序列化

    一般程序在运行时,产生对象,这些对象随着程序的停止运行而消失(java回收机制)但如果我们想把某些对象(因为是对象,所以有各自不同的特性)保存下来,在程序终止运行后,这些对象仍然存在,可以在程序再次运 ...

  5. mvc正则@符号js报错解决办法

    很简单在@前面再加个@就行了,也可以以引进js 的形式解决!

  6. MySQL 5.7贴心参数之binlog_row_image

    相信大家都了解mysql binlog的格式,那就是有三种,分别是STATEMENT,MiXED,ROW.各有优劣,具体的请大家自行查阅资料.在MySQL 5.7版本以前,虽然ROW格式有各种各样的好 ...

  7. BizTalk开发系列(十五) Schema设计之Qualified 与Unqualified

    XML Schema中的命名空间前缀限定包括对元素(Element)或属性(Attribute)的限定,即常见的如 “<ns0:root>...</ns0:root>”之类的格 ...

  8. vue 解决display与 transition冲突

    下边是vue的源码 var raf = inBrowser && window.requestAnimationFrame; var waitForTransitionStart = ...

  9. 【iCore3 双核心板】例程二十：LAN_TCPC实验——以太网数据传输

    实验指导书及代码包下载: http://pan.baidu.com/s/1pJY5uXH iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  10. 使用 JavaScript 实现基本队列、优先队列和循环队列

    1.基本队列的实现 基本队列的方法中,包含了 ①向队列(尾部)中添加元素(enqueue).②(从队列头部)删除元素(dequeue).③查看队列头部的元素(front).④查看队列是否为空(isEm ...