国外做游戏评测的视频网站有哪些,给wordpress博客加上一个娃娃,wordpress 如何回到初始化,网络文化经营许可证流程前情提要#xff1a;大文件分片上传#xff0c;需要利用Upload的customRequest属性自定义上传方法。也就是无法通过给Upload的action属性赋值上传地址进行上传#xff0c;所以Upload组件自带的上传进度条#xff0c;也没法直接用了#xff0c;需要在customRequest中加工一…前情提要大文件分片上传需要利用Upload的customRequest属性自定义上传方法。也就是无法通过给Upload的action属性赋值上传地址进行上传所以Upload组件自带的上传进度条也没法直接用了需要在customRequest中加工一下。
jquery.ajax上传进度
XMLHttpRequest.upload 属性返回一个XMLHttpRequestUpload对象用来表示上传的进度。这个对象是不透明的但是作为一个XMLHttpRequestEventTarget可以通过对其绑定事件来追踪它的进度。
$.ajax({url, // 上传地址type, // get、post、put等类型data, // 上传参数cache: false, //上传文件不需要缓存processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置contentTypesuccess, // 上传成功的处理error, // 上传失败的处理// ...其他ajax的参数请根据需求自定义哈上面是我需要的// 重点在这里// 监听上传进度// 重点在这里xhr: function () {var xhr new XMLHttpRequest();//使用XMLHttpRequest.upload监听上传过程注册progress事件xhr.upload.addEventListener(progress, function (progressEvent) {// progressEvent.loaded是已上传的进度progressEvent.total是总数这里计算上传进度的百分比const percent Math.round((progressEvent.loaded * 100) / progressEvent.total);// 这里调用的是customRequest的参数需要把上传进度传给upload组件后面解释// 也可以自行处理比如自己写个进度条根据percent改变进度条宽度e.onProgress({ percent });})return xhr;},
})Upload.customRequest customRequest详细一点的解释在github上这里主要用到onProgress方法。 调用onProgress方法参数是上传进度Upload的上传进度条会根据参数显示。 不调用的话进度条会一直卡在0%知道上传成功后直接变成100%
代码
// e的属性如上面截图
customRequest: e {$.ajax({url, // 上传地址type, // get、post、put等类型// 上传参数我就直接把文件信息不做处理放到请求参数里了data: e.file,cache: false, //上传文件不需要缓存processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置contentType// 上传成功的处理success: (res) {// 一定要调用onSuccess告诉Upload组件上传成功res的内容会在onChange参数里的file.responsee.onSuccess(res)}, // 上传失败的处理error: (err) {// 告诉Upload组件上传失败err内容会在onChange参数里的file.responsee.onError(err)},// ...其他ajax的参数请根据需求自定义// 监听上传进度xhr: function () {var xhr new XMLHttpRequest();//使用XMLHttpRequest.upload监听上传过程注册progress事件xhr.upload.addEventListener(progress, function (progressEvent) {// progressEvent.loaded是已上传的进度progressEvent.total是总数这里计算上传进度的百分比const percent Math.round((progressEvent.loaded * 100) / progressEvent.total);// 上传进度传给upload组件e.onProgress({ percent });})return xhr;},
})
}
