<form id="uploadForm" runat="server" enctype="multipart/form-data">
<div id="uploadfield" height:500px">
<input id="File1" type="file" runat="server" />
<asp:Button ID="Button1" runat="server" Text="上传" />
<p>文件上传进度条</p>
<p>文件上传进度条</p>
<p>文件上传进度条</p>
<p>文件上传进度条</p>
<p>文件上传进度条</p>
<p>文件上传进度条</p>
<p>文件上传进度条</p>
</div>
<div id="ui" >
<div id="output" > </div>
<div id="progressbar"class="ui-progressbar ui-widget ui-widget-content ui-corner-all" height:20px;"></div>
<input id="btn_cancel" type="button" value="取消上传" />
</div>
</form> js: var inte;
$(function() {
$('#uploadForm').submit(function() {
return false;
});
$('#uploadForm').ajaxForm({ //这里调用jquery.form.js表单注册方法
beforeSubmit: function(a, f, o) {//提交前的处理
o.dataType = "json";
$('#uploadfield').block({ message: $('#ui'), css: { width: '300px', border: '#b9dcfe 1px solid',padding: '0.5em 0.2em' }
});
inte = self.setInterval("getprogress()", 500);
}
});
$('#btn_cancel').click(function() {
var uploadid = $("#UploadID").val();
$.ajax({
type: "POST",
dataType: "json",
async: false, //ajax的请求时同步 只有一个线程
url: "upload_ajax.ashx",
data: "UploadID=" + uploadid + "&cancel=true",
success: function(obj) {
$("#output").html(obj.msg);
inte = self.clearInterval(inte);
$('#uploadfield').unblock();
}
});
});
});
function getprogress() {
var uploadid = $("#UploadID").val()
$.ajax({
type: "POST",
dataType: "json",
async: false,
url: "upload_ajax.ashx",
data: "UploadID=" + uploadid,
success: function(obj) {
var p = obj.msg.Readedlength / obj.msg.TotalLength * 100;
var info = "<FONT color=Green> 当前上传文件:</FONT>" + obj.msg.CurrentFile;
info += "<br><FONT color=Green>" + obj.msg.FormatStatus + ":</FONT>" + obj.msg.Status;
info += "<br><FONT color=Green>文件大小:</FONT>" + obj.msg.TotalLength;
info += "<br><FONT color=Green>速度:</FONT>" + obj.msg.FormatRatio;
info += "<br><FONT color=Green>剩余时间:</FONT>" + obj.msg.LeftTime;
$("#output").html(info);
$("#progressbar").progressbar({ value: 0 }); //初始化
$("#progressbar").progressbar("option", "value", p);
$("#progressbar div").html(p.toFixed(2) + "%");
$("#progressbar div").addClass("percentText");
if (obj.msg.Status == 4) {
inte = self.clearInterval(inte);
$('#uploadfield').unblock();
}
}
});
}
