HTML5文件上传还有进度条
以下是自学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文件上传还有进度条的更多相关文章
- html5 文件上传 带进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- 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 ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Flex4/Flash多文件上传(带进度条)实例分享
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- jquery 实现拖动文件上传加进度条
通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
- .Net neatupload上传控件实现文件上传的进度条
1. 引入bin文件 (可以到neatupload官网下载,也可以到教育厅申报系统中找) 2. 将控件加入到工具栏,在工具栏中点鼠标右键,如图: 3. 加入neatuplaod这个文件夹(可以到nea ...
随机推荐
- centos7安装codeblocks教程
author:lidabo 装了好多次系统,每次装的时候都有要在网上各种查,太麻烦了.所以决定记录一下,以后用到的时候会方便一些.当然,本文来源于网络,取百家之长,最重要的是本人已验证过,说明对本系统 ...
- Swift - 使用UI Dynamics给UIKit组件添加移动吸附行为
UI Dynamics是UIKit的一个新组成部分,它向iOS中的视图提供了与物理学有关的功能和动画.可以让你向视图中引入力和物理属性,可以让你的视图弹跳,舞动,受重力影响等等. 下面通过样例,演示使 ...
- 关于PEER - PEER毅恒挚友 - Powered by Discuz!
关于PEER - PEER毅恒挚友 - Powered by Discuz! PEER Experience Exchange Rostrum(PEER)由海外中国留学生和中国知名高校学生组成,服务中 ...
- HDU 4046 Panda (ACM ICPC 2011北京赛区网络赛)
HDU 4046 Panda (ACM ICPC 2011北京赛区网络赛) Panda Time Limit: 10000/4000 MS (Java/Others) Memory Limit: ...
- µC/OS-II版本升级指南
IDE: MDK V4+ MCU: LPC17xx(Cortex-M3) RTOS: µC/OS-II 升级顺序:V2.52->V2.62->V2.76-> ...
- windows live writer插件说明文档(附录网盘地址)
百度云地址:http://pan.baidu.com/s/1hqnjzjY 1.Screen Capture tool 用于直接在WLWriter中进行截图的一个插件,要配合SnagIt 这个软件使用 ...
- oracle 查询
1. ORACLE查询数据中所存在的表 http://www.cnblogs.com/juddhu/archive/2012/03/22/2411406.html 查询数据库中所有的表: select ...
- Python全栈开发
Python全栈开发 一文让你彻底明白Python装饰器原理,从此面试工作再也不怕了. 一.装饰器 装饰器可以使函数执行前和执行后分别执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之为“ ...
- Storm流计算从入门到精通之技术篇(高并发策略、批处理事务、Trident精解、运维监控、企业场景)
1.Storm全面.系统.深入讲解,采用最新的稳定版本Storm 0.9.0.1 : 2.注重实践,对较抽象难懂的技术点如Grouping策略.并发度及线程安全.批处理事务.DRPC.Storm ...
- Python脚本:获取股票信息
在水木上看到有人在问到想用python去获取股票的信息,sina finance上面的那些数据的是通过js控制的,会根据股票代码去获取实时信息然后根据用户友好的方式展示出来.首先,新浪的一个url让我 ...