HTML5上传文件显示进度的实现代码


Posted in HTML / CSS onAugust 30, 2012

这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服务端语言。让我们看面这个片断的HTML:

复制代码
代码如下:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"}))
{
<div class="row">
<label for="file">
Upload Image:</label>
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" 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 Image" />
</div>
<div id="progressNumber">
</div>
}

相关的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", "Home/Upload");
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 = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}

上面是就原生的Javascript,在onchange事件执行fileSelected的function,在点击button执行了uploadFile的function,这里使用XMLHttpRequest实现ajax上传文件。 注意代码在Firefox 14 可以工作,IE 9目前不支持file api,可以参加这里。 服务端的代码很简单:
复制代码
代码如下:

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
/// <summary>
/// Uploads the specified files.
/// </summary>
/// <param name="fileToUpload">The files.</param>
/// <returns>ActionResult</returns>
[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
{
foreach (HttpPostedFileBase file in fileToUpload)
{
string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path);
}
ViewBag.Message = "File(s) uploaded successfully";
return RedirectToAction("Index");
}
}

作者:Petter Liu
HTML / CSS 相关文章推荐
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
input元素的url类型和email类型简介
Jul 11 #HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 #HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 #HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 #HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 #HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 #HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 #HTML / CSS
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
php 传值赋值与引用赋值的区别
2010/12/29 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
基于php-fpm的配置详解
2013/06/03 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Python编写一个优美的下载器
2018/04/15 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
运动会稿件300字
2014/02/14 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
小班教师个人总结
2015/02/05 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
2019军训心得体会
2019/06/27 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
如何利用python创作字符画
2022/06/25 Python