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= ...
随机推荐
- redis cluster 实践总结
最近项目接触到了redis cluster,现在趁着使用做一下总结,记录一下遇到过的问题,简单的概述一下常用到的命令和功能. 本篇文章主要是以运维的角度去讲述如何去更好的规划redis clust ...
- 洛谷 U6931 灯光
题目背景 明天就是校园活动了,小明作为场地的负责人,将一切都布置好了.但是在活动的前几天,校园里的灯却都坏掉了,无奈之下,只好再去买一批灯.但是很遗憾的是,厂家看马上要过年了,就没有在进货了,现在只剩 ...
- tyvj1659救援队——最小生成树
题目:http://www.joyoi.cn/problem/tyvj-1659 想清楚了是非常简单的最小生成树: 1.树中每条边都会被走两边: 2.每个点会走度数遍,起点又多走一遍: 根据以上两条处 ...
- MMU的理解
MMU内存管理单元相关知识点总结 1.MMU是Memory Management Unit的缩写,中文名是内存管理单元,它是中央处理器(CPU)中用来管理虚拟存储器.物理存储器的控制线路,同时也负责虚 ...
- bash 实现菜单
#!/bin/bash a=`ls /data1/chenggang5/kepler/cases` cat <<EOF `j=0;for i in $a;do let j=$j+1;if ...
- java 通过System.getProperties()获取系统参数
转自:https://www.cnblogs.com/ksuifeng/archive/2010/09/25/1834416.html 1.java的System.getProperty()方法可以获 ...
- 【244】◀▶IEW-Unit09
Unit 9 Food 1)Model1题目及范文讲解 In the world today, there is a problem with food production. As a result ...
- Unity查找Editor下Project视图中特定的资源
[MenuItem("Tools/Check Text Count")] public static void CheckText () { //查找指定路径下指定类型的所有资源, ...
- Http协议-报文
2013的双12即将到来,网上购物是大家所熟悉的.看中小米电视时,可以先下订单然后再付款,电商根据订单将小米电视正确安全的送达给我们.包裹包含电视的基本信息及电视的使用说明书,使我们能够初步的了解它的 ...
- 教你如何暴力破解-telnet ftp ssh mysql mssql vnc 等
大家应该都知道暴力破解的原理,但却不知道遇见telnet和ftp等服务和数据库如何破解,今天小R就教大家如何利用一个工具就能对其破解. 今天要给大家介绍的工具是:hydra(中文名:九头蛇) 这个名听 ...