xhr 的 onpregress 监听上传数据的 已上传 和 总大小
2024-09-01 05:19:21
var fd=new FormData();
$('.mwd_uppingzheng_btna_ok').on('click',function () {
// 数组转 str
var strarr=JSON.stringify(arr_clip);
// 给fd添加 str
fd.append("file", strarr);
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 上传的时候 添加监听
xhr.upload.addEventListener("progress", uploadProgress, false);
// 上传完毕 添加结束事件
xhr.addEventListener("load", uploadComplete, false);
// 上传错误 的事件
xhr.addEventListener("error", uploadFailed, false);
// 用户取消的事件
xhr.addEventListener("abort", uploadCanceled, false);
// 后台接口
xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口
xhr.send(fd);
// 展示 进度弹窗
$('.mdw_uploadingfn').show();
})
// 上传中
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percent = Math.round(evt.loaded * / evt.total);
$('.mdw_uploading_contgiffn').html(percent+'%');
}
else {
$('.mdw_uploading_contgiffn').html('无法计算');
}
}
// 上传结束
function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
$('.mdw_uploadingfn').hide();
$('.mdw_uploading_contgiffn').html(+'%');
arr_clip=[];
// 展示缩略图
show_arr_clips();
}
// 无法上传
function uploadFailed(evt) {
alert("无法上传");
}
// 用户取消
function uploadCanceled(evt) {
alert("用户取消了上传");
}
最新文章
- [译] ASP.NET MVC 6 attribute routing – the [controller] and [action] tokens
- Android MimeType的用法和几种类型
- springMVC 源码解读系列(一)初始化
- SVN命令模式批量更新多个项目文件
- input子系统详解
- 中国IC业“芯”结:IC小国真能赶追韩美日么?
- Android NumberPicker和DatePicker分割线颜色设置
- 苹果iOS苹果公司的手机用户都有权索赔
- Javascript流程控制
- 第二周作业(pta存在的问题)
- [Cerc2013]Magical GCD
- JavaWeb小项目(一)
- 一款DMA性能优化记录:异步传输和指定实时信号做async IO
- Tomcat 9.0 安装配置
- BZOJ 2173 luoguo P4451 [国家集训队]整数的lqp拆分
- plsql developer导入导出序列方法
- 【代码审计】大米CMS_V5.5.3 目录遍历漏洞分析
- stark组件开发之列表页面定制列
- ArcGIS API 和GIServer
- godep的save和update