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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
用js实现in_array的方法
Nov 05 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
layui table设置前台过滤转义等方法
Aug 17 Javascript
详解puppeteer使用代理
Dec 27 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 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 定界符格式引起的错误
2011/05/24 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
简单谈谈Python中的json与pickle
2017/07/19 Python
聊聊Python中的pypy
2018/01/12 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python中pop()函数的语法与实例
2020/12/01 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
室内设计自我鉴定
2013/10/15 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
运动会班级口号
2014/06/09 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
培训班通知
2015/04/25 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
高中美术教学反思
2016/02/17 职场文书