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实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 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
php去除HTML标签实例
2013/11/06 PHP
php实现encode64编码类实例
2015/03/24 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
python实现求特征选择的信息增益
2018/12/18 Python
在django模板中实现超链接配置
2019/08/21 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
施工人员岗位职责
2013/12/12 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
《乌塔》教学反思
2014/02/17 职场文书
小学一年级评语大全
2014/04/22 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers