相思资源网 Design By www.200059.com

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

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

<script src="/UploadFiles/2021-04-02/jquery-1.2.6.pack.js">

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实现大文件上传及进度条显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
jquery,bigfileupload文件上传进度条

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无Jquery和BigFileUpload实现大文件上传及进度条显示的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。