实现方法:用到了高山来客 的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">
多文件上传
上传进度条显示
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 上传,批量上传 进度条显示jquery 上传
JAVA -jquery--fileupload 文件上传带进度条 已测可用.
Jquery实现进度条显示百分比 Jquery实现进度条显示百分比 Jquery实现进度条显示百分比
JQuery和Servlet实现上传进度条完整代码
jquery的一个进度条插件,你可以通过调用实现不同的进度条显示效果
jsp+JQuery多文件上传进度条显示(单选文件) 代码简单,只有jsp 没有后端 后端需要自己在项目基础上进行修改
jquery.form.js是一款jquery插件,通过该插件并配合jquery-3.3.1.js强大的选择器功能,我们可以非常简单的实现表单的异步提交,并实现文件上传、进度条显示等等,我曾使用两者配合异步实现图片的上传及回显等功能。
jquery文件上传插件(多文件选择、带进度条 ,图片预览)
用jquery实现的进度条插件,使用非常简单,可用做程序进度显示或AJAX文件上传
在web应用中,客户端向服务器传送大文件是常用功能。在上传过程中,不给用户提供当前上传进度信息是非常不友好的,这会给用户造成茫然的感觉,例如:文件是上传着呢还是死机了呢?上传什么时候完成呀?我得等待多久...
jquery prototyoe文件上传(页面同时显示进度条,文件大小,上传信息),可以根据实际情况具体改造一下。
struts2+jquery多文件上传显示进度条,可直接运行(非常强大,效果很好),带jar包
Struts2.0+jquery.progressbar实现上传文件进度条 附带实例源码 uploadJqueryProgress.jsp uploadprogress.jsp 两个上传页面,两种不一样风格的进度条。uploadJqueryProgress.jsp 是在 uploadprogress.jsp 的基础...
spring+jquery实现文件上传带进度条
jquery之Uploadify实现的带进度条的文件上传
jquery实现进度条特效,直接可调用,可以自己定义样式风格等
主要为大家详细介绍了jquery+ajax实现异步上传文件显示进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用struts+jquery实现的ajax文件上传带进度条的,部署到myeclipse上就能用