Jquery和BigFileUpload实现大文件上传及进度条显示


Posted in Javascript onJune 27, 2016

实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面,而是要不断地通过ajax获取progress.aspx返回的进度信息,所以用到了jquery.form的ajaxform提交。ajaxform提交后如果执行提交后的事件,比如在数据库里插入记录,还在调试中。

1、用到了jquery 的 progressbar 、form、MultFile及相关组件

<script src="../../common/js/jquery-1.2.6.pack.js" type="text/javascript"></script> 
<script src="../../common/jqControl/packed/ui.core.packed.js" type="text/javascript"></script> 
<!--FORM--> 
<script src="../../common/jqControl/ajax/jquery.form.js" type="text/javascript"></script> 
<!--上传文件--> 
<script src="../../common/jqControl/upLoad/jquery.MultiFile.pack.js" type="text/javascript"></script> 
<!--进度条--> 
<script src="../../common/jqControl/packed/ui.progressbar.packed.js" type="text/javascript"></script> 
<!--对话框--> 
<!--我的JS --> 
<link href="../../common/Css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css" /> 
<script src="../gadget/JS/uploadfile.js" type="text/javascript">

Jquery和BigFileUpload实现大文件上传及进度条显示 

2.uploadfile.js代码如下:

$(function() 
{ 
var info = '<div style="display:none" id="uploadinfo">'; 
info += '<p>正在上传: <span id="uploadfilename"></span></p>'; 
info += '<p>上传速度: <span id="uploadrate"></span> </p>'; 
info += '<p>状态: <span id="uploadtitle"></span></p>'; 
info += '<p>预计剩余时间: <span id="uploadlefttime"></span></p>'; 
info += '<p>上传文件大小: <span id="uploadtotal"></span></p>'; 
info += '<p>已上传大小: <span id="uploadcurrent"></span></p>'; 
info += '<p><div id="uploadprogressbar"></div></p>'; 
info += '</div><div id="dialogsucc" > '; 
$("body").append(info); 
//进度条 
$("#uploadprogressbar").progressbar(); 
//上传 
$('#fileupload').MultiFile(); 
$('#btshow').click(function() 
{ 
alert($("body").html()); 
}); 
//提交 
$('#btnsubmit').click(function() 
{ 
$("#uploadForm").ajaxSubmit( 
{ 
dataType: 'text', 
beforeSubmit: function(a,f,o) 
{ 
startProgress(); 
}, 
async:false, 
success: function(data) 
{ 
//$("#dialogsucc").text(data); 
//stopProgress(); 
if(data.succ==1) 
{ 
/* $("#dialogsucc").show(); 
$("#dialogsucc").dialog( 
{ 
modal: true, 
overlay: 
{ 
opacity: 0.5, 
background: "black" 
} 
}); */ 
} 
}, 
error:function(err) 
{ 
alert(err); 
} 
}); 
}); 
}); 
function getProgress(){ 
$.ajax({ 
type: "post", 
dataType:"json", 
url: "uploadProgress.aspx", 
data: "UploadID=" + $("#UploadID").val(), 
success: function(data){ 
$("#uploadprogressbar").progressbar("progress", data.percent); 
$("#uploadfilename").html(data.filename); 
$("#uploadrate").html(data.rate); 
$("#uploadtitle").html(data.info); 
$("#uploadlefttime").html(data.lefttime); 
$("#uploadtotal").html(data.total); 
$("#uploadcurrent").html(data.current); 
if(data.succ==-1){ 
alert(data.errmsg); 
} 
if (data.succ==0){ 
setTimeout("getProgress()", 1000); 
} 
if (data.succ==1){ 
return; 
} 
}, 
error:function(msg) 
{ 
alert(msg); 
} 
}); 
} 
function startProgress(){ 
$("#uploadinfo").show(); 
setTimeout("getProgress()", 500); 
} 
function stopProgress() 
{ 
$("#uploadinfo").hide(); 
}

3:progress.aspx代码如下:

protected void Page_Load(object sender, EventArgs e) 
{ 
try 
{ 
string s = "{"; 
UploadContext upload = UploadContextFactory.GetUploadContext(Request["UploadID"]); 
//初始化 
if (upload.Status == uploadStatus.Initializing) 
{ 
s += responeJSON(upload, "0", ""); 
} 
if (upload.Status == uploadStatus.Uploading) 
{ 
s += responeJSON(upload, "0", ""); 
} 
if (upload.Status == uploadStatus.Complete) 
{ 
s += responeJSON(upload, "1", ""); 
} 
if (upload.Status == uploadStatus.HasError) 
{ 
s += responeJSON(upload, "-1", ""); 
} 
s += "}"; 
Response.Write(s); 
} 
catch (Exception err) 
{ 
//throw err; 
Response.Write("{'info':'" + err.Message.Replace("'", "") + "','succ':-1}"); 
} 
} 
private string responeJSON(UploadContext upload, string succ,string errmsg) 
{ 
string s = ""; 
s += "'info':'" + upload.FormatStatus + "'" ; 
s += ",'percent':'" + Convert.ToInt32((upload.Readedlength * 100.0 / upload.TotalLength)).ToString() + "'"; 
s += ",'current':'" + (upload.Readedlength/1024).ToString() + "KB'"; 
s += ",'total':'" + (upload.TotalLength/1024).ToString() + "KB'"; 
s += ",'rate':'" + upload.FormatRatio + "'"; 
s += ",'filename':'" + upload.CurrentFile + "'"; 
s += ",'cancel_upload':" + 0 ; 
s += ",'lefttime':'" + upload.LeftTime + "'"; 
s += ",'succ':" + succ; 
s += ",'errmsg':'" + errmsg +"'"; 
return s; 
}

4.ajaxForm执行后,能够正常运行,那上传文件后,我如何执行其它操作,研究完了再发

以上所述是小编给大家介绍的Jquery和BigFileUpload实现大文件上传及进度条显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 #Javascript
JavaScript事件详细讲解
Jun 27 #Javascript
JS原型链怎么理解
Jun 27 #Javascript
js选择器全面解析
Jun 27 #Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 #Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 #Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 #Javascript
You might like
php 显示指定路径下的图片
2009/10/29 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
浅谈php的优缺点
2015/07/14 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
python字典键值对的添加和遍历方法
2016/09/11 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python版飞机大战代码分享
2018/11/20 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Pandas之缺失数据的实现
2021/01/06 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
公司节能减排方案
2014/05/16 职场文书
就职演讲稿范文
2014/05/19 职场文书
幼师求职自荐信
2014/05/31 职场文书
学习型班组申报材料
2014/05/31 职场文书
个人承诺书格式
2014/06/03 职场文书
学生违反校规检讨书
2014/10/28 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis