笑个妹
赶紧来个推荐
52,797
社区成员
发帖
与我相关
我的任务
分享分享在实际项目中会使用到ajax/xhr2.0上传文件，并显示进度条的例子。（仅支持html5）
//这里用的jQuery扩展
(function($){
jQuery.ajaxFormData = function (option) {
///<summary>使用html5、xhr2上传数据以及文件</summary>
///<param name="option">参数，对象-type：提交方式，uoloadProgress：监听上传进度，complete：请求完成后回调函数，success：请求成功后的回调函数，error： 请求失败时调用此函数，data：FormData对象</param>
var setting = {
type: "post",
uploadProgress: uploadProgress,
complete: function(evt) {
},
data: new FormData(),
dataType : "json"
};
if (typeof (option) == "object") {
$.extend(setting, option);
}
var xhr = new XMLHttpRequest();
var isProgress = "onprogress" in xhr.upload;
var index = layer.loading();
if (isProgress) {
//xhr.upload.addEventListener("progress", setting.uploadProgress, false);
xhr.upload.onprogress = function (evt) {
uploadProgress(evt);
}
}
xhr.addEventListener("load", setting.complete, false);
xhr.open(setting.type, setting.hasOwnProperty("url") ? setting["url"] : "");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (typeof (setting.success) == "function") {
var data = null;
if (setting.dataType.toLowerCase() == "json") {
data = $.parseJSON(xhr.responseText);
} else if (setting.dataType.toLowerCase() == "xml") {
data = $.parseXML(xhr.responseText);
} else if (setting.dataType.toLowerCase() == "html") {
data = $.parseHTML(xhr.responseText);
} else {
data = xhr.responseText;
}
setting.success(data, xhr.status, xhr);
}
} else {
if (typeof (setting.error) == "function") {
setting.error(xhr.responseText, xhr.status, xhr);
}
}
}
}
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.send(setting.data);
}
});
function uploadProgress(evt) {
///<summary>显示进度条</summary>
///<param name="evt"></param>
layer.closeAll();
if (evt.lengthComputable) {
layer.showProgressBar();
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById("progress").value = percentComplete;
}
else {
document.getElementById("tips").innerHTML = "无法计算进度";
}
}
function uploadComplete(evt, successCallback) {
///<summary>请求完成执行的函数,并非ajaxFormData option.complete默认值</summary>
///<param name="evt">xhr</param>
///<param name="successCallback">请求成功的回掉函数</param>
layer.closeAll();
$("#progressTips").hide();
if (evt.target.status != 200) {
//Todo 扩展错误请求
return;
}
var result = $.parseJSON(evt.target.responseText);
var progress = document.getElementById("progress");
if (null != progress) {
progress.value = 0;
}
if (result["IsError"]) {
layer.alert(result["ErrMsg"]);
} else {
if (typeof (successCallback) == "function") {
successCallback(result);
}
}
}
var layerExtend = {
alert: function (content, shadeClose) {
///<summary>扩展alert函数</summary>
///<param name="content">提示内容</param>
///<param name="shadeClose">是否点击遮罩时关闭层</param>
return layer.open({ content: content, shadeClose: (typeof (shadeClose) == "boolean" ? shadeClose : true) });
},
confirm: function (content, yesCallBack, noCallBack, shadeClose) {
///<summary>扩展询问框</summary>
///<param name="content">询问内容</param>
///<param name="yesCallBack">询问框确定的回掉函数</param>
///<param name="noCallBack">询问框否定的回掉函数</param>
///<param name="shadeClose">是否点击遮罩时关闭层</param>
return layer.open({
title: "提示",
content: content,
btn: ["嗯", "不要"],
yes: function (index) {
if (typeof (yesCallBack) != "undefined" && typeof (yesCallBack) == "function") {
yesCallBack(index);
}
},
no: function (index) {
if (typeof (noCallBack) != "undefined" && typeof (noCallBack) == "function") {
noCallBack(index);
}
},
shadeClose: (typeof (shadeClose) == "boolean" ? shadeClose : true)
});
},
loading: function () {
///<summary>扩展loading</summary>
return layer.open({ type: 2, shadeClose: false });
},
showProgressBar:function() {
///<summary>显示进度条</summary>
if ($("#progressTips").length != 0) {
$("#progressTips").show();
} else {
var progressTips = $("<div></div>");
progressTips.attr("id", "progressTips");
progressTips.html("<div class=\"progressTips-bg\"></div><div class=\"progress-wrap\"><progress id=\"progress\" value=\"0\" max=\"100\"></progress></div>");
$("body").append(progressTips);
$("#progressTips").show();
}
},
closeProgressBar:function() {
///<summary>关闭进度条</summary>
$("#progressTips").remove();
},
msg: function (msg) {
///<summary>不带遮罩层并自动关闭的提示框</summary>
///<param name="msg">消息内容</param>
var index = layer.open({ content: msg, shade: false });
setTimeout(function() {
layer.close(index);
}, 1000);
}
};
$(function() {
$.extend(layer, layerExtend);
});
/*关于进度条相关的样式*/
#progressTips {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
z-index: 9999;
}
#progressTips .progressTips-bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: #000;
opacity: 0.5;
z-index: 1;
}
#progressTips .progress-wrap {
background-color: #fff;
width: 160px;
height: 26px;
border-radius: 3px;
line-height: 26px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px;
top: 50%;
}
#progressTips .progress-wrap progress {
margin: 6px auto;
display: block;
}
.hide{display: none}
使用了layer的弹框组件。
还有，注意一下UC浏览器坑爹的不支持onprogress事件，onprogress事件就是监听上传的事件。
而且测试了多次，UC的 "onprogress" in xhr.upload 值为true，这里我要说一句，UC，你先死个妈
...全文
请发表友善的回复…
发表回复
