以下是自学it网--中级班上课笔记

网址：www.zixue.it

需要在chrome,ff,IE10下运行

html页面

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<title>HTML5 文件上传进度条</title>

<meta charset="utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<script type="text/javascript">

/*

想得到传送文件的进度条

1:要能把文件内容打包并发送  FormData对象

2: 发送过程中,要能不断检测 已发送/全部 progress.onprogress

*/

</script>

<style type="text/css">

#progress{

border: 1px solid blue;

width:500px;

height:20px;

}

#bar {

background:green;

height:20px;

width:0%;

}

</style>

</head>

    <body>

        <h1>在chrome,ff,IE10运行</h1>

        <form>

            <input type="file" name="pic" /><br />

        </form>

        <div id="progress"><div id="bar"></div></div>

    </body>

    <script>

        // 负责ajax发送数据

        function up(fd) {

            var xhr = new XMLHttpRequest();

            xhr.open('POST','upfile.php',true); // 异步传输

            // xhr.upload 这是html5新增的api,储存了上传过程中的信息

            xhr.upload.onprogress = function (ev) {

                var percent = 0;

                if(ev.lengthComputable) {

                    percent = 100 * ev.loaded/ev.total;

                    //document.getElementById('progress').innerHTML = percent;

                    document.getElementById('bar').style.width = percent + '%';

                }

            }

            xhr.send(fd);

        }

        document.getElementsByTagName('input')[0].onchange = function() {

            //alert('你选择文件了');

            //alert(this.files[0]); // 文件对象,html5新增的api

            var fd = new FormData(); // html5新增的对象,可以包装字符,二进制信息

            fd.append(this.name,this.files[0]);

            up(fd);

        }

    </script>

</html>

upfile.php页面

echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';

如图所示：

HTML5文件上传还有进度条的更多相关文章

  1. html5 文件上传 带进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  3. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  4. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  5. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  7. jquery 实现拖动文件上传加进度条

    通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...

  8. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  9. .Net neatupload上传控件实现文件上传的进度条

    1. 引入bin文件 (可以到neatupload官网下载,也可以到教育厅申报系统中找) 2. 将控件加入到工具栏,在工具栏中点鼠标右键,如图: 3. 加入neatuplaod这个文件夹(可以到nea ...

随机推荐

  1. 01-IOSCore - NSString、NSFileManager、NSBundle、StringAndObjectConvert

    模型 1 将数据存储到硬盘,将硬盘上的数据在读回内存 2 文件存储: NSFileHandle 对文件的读写 NSData 二进制数据 NSString 表示文件路径 NSFileManager(对文 ...

  2. 常见Linux服务器操作系统版本中自带的OpenSSL版本

    下表是常见服务器操作系统版本中自带的OpenSSL版本: 从上表可以看出,目前常用的服务器版本中,默认OpenSSL为1.0.2的只有Ubuntu 16.04 LTS.其他版本如果要升级OpenSSL ...

  3. Qt同步线程（比较清楚，而且QMutex QMutexLocker QReadWriteLock QSemaphore QWaitCondition 每个都有例子）

    Qt同步线程 我们知道,多线程有的时候是很有用的,但是在访问一些公共的资源或者数据时,需要进行同步,否则会使数据遭到破坏或者获取的值不正确.Qt提供了一些类来实现线程的同步,如QMutex,QMute ...

  4. Lucene4.3入门

    辞职交接期间无聊看了一下搜索引擎,java社区比较火的当然是Lucene,想写一个简单的小例子,在网上找了些资料,不过都不是4.3的,自己看了一下. 下载地址:http://lucene.apache ...

  5. javascript笔记整理（对象基础）

    一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...

  6. C#由变量捕获引起对闭包

    C#由变量捕获引起对闭包的思考   前言 偶尔翻翻书籍看看原理性的东西确实有点枯燥,之前有看到园中有位园友说到3-6年工作经验的人应该了解的.NET知识,其中就有一点是关于C#中的闭包,其实早之前在看 ...

  7. 在JS中，一个自定义函数如何调用另一个自定义函数中的变量

    function aa1511() { var chengshi="马鞍山"; var shengfen="安徽省"; return shengfen+&quo ...

  8. Android中Parcelable序列化总结

    在使用Parcelable对android中数据的序列化操作还是比较有用的,有人做过通过对比Serializable和Parcelable在android中序列化操作对象的速度比对,大概Parcela ...

  9. 第12届北师大校赛热身赛第二场 B起床的烦恼

    题目链接:http://www.bnuoj.com/bnuoj/contest_show.php? cid=3570#problem/43572 题目大意: Nono从一開始数数,他每数一个数时会计算 ...

  10. 立波 iphone3gs越狱教程:成功把iphone3gs手机升级成ios6.1.3系统,完美越狱,解决no service和耗电量大的问题

    前几天,老婆使用的iphone3gs摔地了,把手机里的连接电源的那个神马线给搞坏了,结果花了200多块大洋修好了: 修好后,老婆抱怨道:5年了,这手机好多软件都装不上,说手机版本号太低了, 我就说凑合 ...