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

废话不多说走码。。。。

<!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. Linux任务调度命令（轻松管理Linux）

    Linux任务调度其实就是让系统在某个时间执行某些命令或者程序,这样可以让管理员更加轻松地管理自己的Linux,当我刚了解到这个方法时,我的内心充满了无尽的欣喜,感觉Linux实在是太强大了. 下面我 ...

  2. Func<T, TResult> Delegate

    public delegate TResult Func<in T, out TResult>( T arg ) http://msdn.microsoft.com/en-us/libra ...

  3. iOS 中实现功能引导页面

    // //  guideView.h //  07-功能引导-李洪强 // //  Created by vic fan on 16/1/4. //  Copyright © 2016年 李洪强. A ...

  4. <button>和<input type="button"> 的区别

    <button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...

  5. android夜间模式实现

    一.概述 android夜间模式实现分为两大类 重启activity的实现 不重启activity的实现 二.正文 1.重启activity实现夜间模式[在界面文件中的实现部分] 1.1在attrs. ...

  6. [CareerCup] 17.11 Rand7 and Rand5 随机生成数字

    17.11 Implement a method rand7() given rand5(). That is, given a method that generates a random numb ...

  7. nfs基本配置

    一.安装nfs: yum install nfs-utils rpcbind 创建共享目录:mkdir -p /XXX/export/ 修改配置文件:vim /etc/exports /XXX/exp ...

  8. Unity3D着色器Shader编程入门（一）

    自学Unity3D也有大半年了,对Shader一直不敢入坑,最近看了些资料,以及通过自己的实践,对Shader还是有一点了解了,分享下仅作入门参考. 因Shader是对图像图像渲染的,学习前可以去了解 ...

  9. U3D--常用属性（不完整，待加）

    1. AddComponentMenu 描述:这个属性可以在Component这个菜单栏下加自己定义的子菜单,这样可以快速添加常用的脚本.该属性要用在类上. using UnityEngine; us ...

  10. poj3292-Semi-prime H-numbers(筛法打表)

    一,题意:  一个H-number是所有的模四余一的数.(x=4*k+1)  如果一个H-number是H-primes 当且仅当它的因数只有1和它本身(除1外). 一个H-number是H-semi ...