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= ...
随机推荐
- AtCoder Regular Contest E - Or Plus Max
Time limit : 2sec / Memory limit : 1024MB Score : 700 points Problem Statement There is an integer s ...
- poj1065 Wooden Sticks[LIS or 贪心]
地址戳这.N根木棍待处理,每根有个长x宽y,处理第一根花费1代价,之后当处理到的后一根比前一根长或者宽要大时都要重新花费1代价,否则不花费.求最小花费代价.多组数据,N<=5000 本来是奔着贪 ...
- 解析Monte-Carlo算法(基本原理,理论基础,应用实践)
引言 最近在和同学讨论研究Six Sigma(六西格玛)软件开发方法及CMMI相关问题时,遇到了需要使用Monte-Carlo算法模拟分布未知的多元一次概率密度分布问题.于是花了几天时间,通过查询相关 ...
- Out of resources when opening file ‘./xxx.MYD’ (Errcode: 24)解决方法
今天朋友向我反映网站出现错误:Out of resources when opening file './xxx.MYD' (Errcode: 24)错误是因为打开的文件数超过了my.cnf的--op ...
- 百度地图API的第一次接触——右键菜单
1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- 如何使用Git命令将项目从github或者服务器上克隆下来
在本地新建一个文件夹,作为本地仓库,如“demo”.单击右键git Bush here,打开git,输入命令: cd /c/Users/Administrator/Desktop/demo 然后按回 ...
- 条款32:确定你的public继承塑模出is-a的关系
Make sure public inheritance models "is –a " 如果令clsss D 以public的形式继承class B,你便是告诉编译器说,每一个类 ...
- NFS资料
Linux NFS服务器的安装与配置 http://www.cnblogs.com/mchina/archive/2013/01/03/2840040.html Linux NFS服务器的安装与配 ...
- 如何在VS2015中使用Git命令提示符
本文转载自 http://qkxue.net/info/176223/Visual-Studio-Git VS2015自带了Git插件,但有时候觉得Git控制台命令更方便些.VS中本身不能把Git B ...
- MFC——4个基本类中的成员函数介绍
09121852 杜军 机械设计及理论 1. CMainFrame ActivateFrame使框架对用户可视并可用 CalcWindowRect每当主框架窗口的客户区尺寸发生变化或控制条的位置发生变 ...