HTML5关于上传API的一些使用(中)
2017-07-18 18:49
232 查看
上一次写了关于HTML的上传API,XMLHttpRequest2.0的上传方式,以及HTML5中上传之前本地的预览,包括对于图片以及部分信息的预 览。这次我们就讲下HTML5中关于上传的一些各种个性化需求的处理,主要包括实时进度条,上传速度的实时显示等。
关于上传事件
首先要做到实时进度条这种需求,首先我们需要得到关于上传的各种事件,这些事件大部分都是在XMLHttpRequest这个对象下面:progress事件:上传进度事件。
load事件:传输成功完成。
abort事件:传输被用户取消。
error事件:传输中出现错误。
loadstart事件:传输开始。
loadEnd事件:传输结束,但是不知道成功还是失败。
其中progress事件分为上传和下载两种情况,上传的时候progress事件实际上是在XMLHttpRequest.upload对象下面,而下载的时候属于XMLHttpRequest对象
关于实时进度条
我们可以在上篇中的方法基础上进行扩展来写实时进度条的方法,var xhr=new XMLHttpRequest(); var formData=new FormData(); formData.append('name',"Jack"); formData.append('uid',666666); xhr.open("post",url); xhr.send(formData); //上传中 xhr.upload.addEventListener("progress", uploadProgress, false); //上传成功 xhr.addEventListener("load", uploadComplete, false); //上传出错 xhr.addEventListener("error", uploadFailed, false); //上传取消 xhr.addEventListener("abort", uploadCanceled, false);
而上传事件还给我们提供了下面这些数据
total – 文件大小
loaded – 已上传的大小
lengthComputable – 进度是否可计算
通过上面这些事件以及属性就可以很轻易的写出进度条。
function uploadProgress(evt){ //evt 上传事件中返回的数据 if (evt.lengthComputable) { //判断进度是否可以计算 var percentComplete = Math.round(evt.loaded * 100 / evt.total); //对进度进行计算并且格式化 document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; //输出100% }else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } }
上面这个方法是直接在某个div中直接显示百分比的数字,假如我们需要做进度条也很简单,可以添加一个标签,默认宽度为0,然后在uploadProgress方法中动态更改标签的宽度,单位为百分比,而值就是percentComplete,这样可以在上传的过程当中得到一个完整的进度条。
而当我们文件上传完毕之后可以在load事件中绑定的uploadComplete方法中去做一些css等UI的修改。
关于实时上传速度的显示
现在进度条有了,可是我们还想知道速度是多少应该怎么办呢。可以通过计算的方法获取其上传的速度,我们在progress事件中是知道已上传的文件大小的,那我们在uploadProgress方法中没过1秒都去计算一下这一次和上一次的loaded大小就可以知道其每秒的上传速度。从而在页面上实时的更新当前的上传速度了。
代码如下
// currentLoadedBytesb本次上传的数据总量, // lastLoadedBytes 上一次上传的数据总量 // oldObjUploadBits旧的上传速度 var currentLoadedBytes,lastLoadedBytes,oldObjUploadBits; timer = setInterval( function () { var bytesCount = currentLoadedBytes - lastLoadedBytes; if (bytesCount !== 0) { var speed = ConvertBytesUnit(bytesCount); $(obj).html("上传速度:" + speed.number + speed.unit + "/s"); } else { $(obj).html(oldObjUploadBits); } oldObjUploadBits = $(obj).html(); lastLoadedBytes = currentLoadedBytes; } , 1000) function ConvertBytesUnit(size){ if (size < 0) size = 0; var result = {}; if (size > 1024 * 1024) { result.number = (size / (1024 * 1024)).toFixed(2); result.unit = "MB"; } else if (size > 1024 ) { result.number = (size / 1024).toFixed(2); result.unit = "KB"; } else { result.number = size.toFixed(2); result.unit = "B"; } return (result); }
通过上面的方法就可以获得每一秒具体的上传速度了。
另外XMLHttpRequest2.0可以实现的功能其实很多,另外还可以实现断点续传,以及分片上传等更高级的功能。我们留在下一篇再来说。
相关文章推荐
- HTML5关于上传API的一些使用(下)
- HTML5关于上传API的一些使用(上)
- jquery.uploadify上传插件HTML5版中文api使用说明
- 关于文件流的模拟上传——人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata) | 彬Go
- 关于 HTML5 的文件上传处理,兼容,以及 BLOB 对象的使用
- 关于文件流的模拟上传——人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata) | 彬Go
- 关于Android使用新浪API的一些说明
- 关于HTML5 地理位置geolocation API 的一些事
- 关于使用阿里云OSS对象储存上传大视频和转码的一些心得
- 关于HTML5中hash部分API在历史管理,选项卡自动跳转中的一点使用
- 关于何种情况下使用DataGrid、DataList或Repeater的一些讨论
- 关于在B/S程序中使用SPS对象实现文件上传
- 关于使用sping MVC框架进行文件上传的一点感受
- 关于何种情况下使用DataGrid、DataList或Repeater的一些讨论
- 关于何种情况下使用DataGrid、DataList或Repeater的一些讨论
- 关于使用commons-betwixt组件实现xml信息-->Java Bean的转化的一些感受
- 关于何种情况下使用DataGrid、DataList或Repeater的一些讨论(1) ambushaa [翻译] [转]
- 关于使用存储过程的一些好处以及注意事项
- 关于Editplus的一些使用方法
- 关于使用Java开发工具的一些心得