HTML5利用FormData对象实现显示进度条的文件上传
摘自：https://blog.csdn.net/q1056843325/article/details/53759963
自己做是按这个实现的，兼容性还不错
完整简约的解决方案
下面的代码清单是包括能够支持的最小文件与进度指示器上传所需的JavaScript和HTML整个页面
我尽量保证它的简洁
所以如果你想要使用自己的布局和显示信息可以借此扩展
HTML5还引入了progress标签用于显示进度
progress元素有max和value属性，因此使用它可以更方便的显示进度
但是，在写这篇文章的时候，只有Chrome6支持这个元素
所以我在这个简约的解决方案没有使用它
更改服务器端脚本的URL
请务必将URL更改为指向你上传文件的服务器端URL
在下面的代码清单中
UploadMinimal.aspx的uploadFile()方法：xhr.open("POST", "UploadMinimal.aspx");
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "UploadMinimal.aspx");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = '无法计算';
}
}
function uploadComplete(evt) {
/* 当服务器响应后，这个事件就会被触发 */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("上传文件发生了错误尝试");
}
function uploadCanceled(evt) {
alert("上传被用户取消或者浏览器断开连接");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
【代码6：完整简约的代码清单】
嗯，这是几乎涵盖了所有新版HTML5功能的简约版本
在图片2中大家也看到了，获取其他信息需要数学知识
这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用
例如获取上传的速率（上传速度）
我做了以下几点：
- 在uploadProgress(evt)事件中，存储evt.loaded和evt.total作为全局变量
- 创建了一个每秒触发的计时器事件
- 在定时器的回调中，获取了传输字节的差值（与1s之前的差）
- 每秒上传字节数得到上传速度
在这里，我还设置了定时器每500毫秒获取从而更加精细
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title> <script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
} function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "UploadMinimal.aspx");
xhr.send(fd);
} function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = '无法计算';
}
} function uploadComplete(evt) {
/* 当服务器响应后，这个事件就会被触发 */
alert(evt.target.responseText);
} function uploadFailed(evt) {
alert("上传文件发生了错误尝试");
} function uploadCanceled(evt) {
alert("上传被用户取消或者浏览器断开连接");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
嗯，这是几乎涵盖了所有新版HTML5功能的简约版本
在图片2中大家也看到了，获取其他信息需要数学知识
这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用
例如获取上传的速率（上传速度）
我做了以下几点：
- 在uploadProgress(evt)事件中，存储evt.loaded和evt.total作为全局变量
- 创建了一个每秒触发的计时器事件
- 在定时器的回调中，获取了传输字节的差值（与1s之前的差）
- 每秒上传字节数得到上传速度
在这里，我还设置了定时器每500毫秒获取从而更加精细
完整简约的解决方案
下面的代码清单是包括能够支持的最小文件与进度指示器上传所需的JavaScript和HTML整个页面
我尽量保证它的简洁
所以如果你想要使用自己的布局和显示信息可以借此扩展
HTML5还引入了progress标签用于显示进度
progress元素有max和value属性，因此使用它可以更方便的显示进度
但是，在写这篇文章的时候，只有Chrome6支持这个元素
所以我在这个简约的解决方案没有使用它
更改服务器端脚本的URL
请务必将URL更改为指向你上传文件的服务器端URL
在下面的代码清单中
UploadMinimal.aspx的uploadFile()方法：xhr.open("POST", "UploadMinimal.aspx");
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "UploadMinimal.aspx");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = '无法计算';
}
}
function uploadComplete(evt) {
/* 当服务器响应后，这个事件就会被触发 */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("上传文件发生了错误尝试");
}
function uploadCanceled(evt) {
alert("上传被用户取消或者浏览器断开连接");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
【代码6：完整简约的代码清单】
嗯，这是几乎涵盖了所有新版HTML5功能的简约版本
在图片2中大家也看到了，获取其他信息需要数学知识
这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用
例如获取上传的速率（上传速度）
我做了以下几点：
- 在uploadProgress(evt)事件中，存储evt.loaded和evt.total作为全局变量
- 创建了一个每秒触发的计时器事件
- 在定时器的回调中，获取了传输字节的差值（与1s之前的差）
- 每秒上传字节数得到上传速度
在这里，我还设置了定时器每500毫秒获取从而更加精细
HTML5利用FormData对象实现显示进度条的文件上传的更多相关文章
- Ajax实现带进度条的文件上传
Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...
- Ajax技术——带进度条的文件上传
1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
- 采用formdata做跨域的、无刷新、带进度条的文件上传
以前做无刷新上传,都要用iframe,如果想有进度条,就千难万难,不得不用flash等插件来实现. 现在HTML5终于普及了,筒子们不用再那么痛苦了. 所有这一切都变得异常简单!! 不信?且看如下代码 ...
- Android带进度条的文件上传，使用AsyncTask异步任务
最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. A ...
- 利用windows系统ftp命令编写的BAT文件上传[转]
利用windows系统ftp命令编写的BAT文件上传[转] 利用windows系统ftp命令编写的BAT文件上传[转] 在开发中往往需要将本地的程序上传到服务器,而且用惯了linux命令的人来说.在w ...
- 初识html5 File API实现带有进度提示的文件上传
Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipar ...
- H5 FormData对象的使用——进行Ajax请求并上传文件
XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- FormData可实现异步传输二进制文件(即异步文件上传)
XMLHttpRequest Level 2 添加了一个新的接口——FormData.它能使现在的AJAX交互更加简单.之前的AJAX在上传前,需要将表单的数据序列化.与普通的 Ajax 相比,使用 ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
随机推荐
- 【Lintcode】382.Triangle Count
题目: Given an array of integers, how many three numbers can be found in the array, so that we can bui ...
- 【Lintcode】046.Majority Number
题目: Given an array of integers, the majority number is the number that occurs more than half of the ...
- sql 的基础语句
USE day15; -- 创建表CREATE TABLE teacher( id INT, NAME VARCHAR(20))-- 查看所有表SHOW TABLES; DESC student; D ...
- hibernate学习五 Hibernate补充
1 MiddleGenIDE可以生成映射类和映射文件. 2
- MFC中界面自适应
void CMyDlg::OnSize(UINT nType, int cx, int cy){ CDialogEx::OnSize(nType, cx, cy); CRect rt; GetClie ...
- oracle 查询及删除重复记录的SQL语句
查询及删除重复记录的SQL语句 1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断 select * from 表 where Id in (select Id from 表 group ...
- MySQL Horizontal Scaling
http://www.tuicool.com/articles/miuq63E http://www.guokr.com/blog/475765/ http://songwie.com/article ...
- repackage android application
decompile the application file apktool d -o dianping/ dianping.apk modify the resources / smali asse ...
- Nginx的一些优化(突破十万并发)
Nginx的一些优化(突破十万并发) nginx指令中的优化(配置文件) worker_processes 8; nginx进程数,建议按照cpu数目来指定,一般为它的倍数. worker_cpu_a ...
- posix 正则库程序
使用的是posix 正则库,参考: http://see.xidian.edu.cn/cpp/html/1428.html 执行匹配的时: gcc myreg.c ip.pat 内容: ip.*[0- ...