文件上传 数据对比
https://github.com/zhangsichu/UploadDemo/tree/e5997e2cf9b200f74aaa69db53798c8e625f4244/UploadDemo/H5Webuploader
。文件(图片)上传调研
浏览器占有率
来源:百度相册
浏览器占有率
浏览器 | 占有率 |
---|---|
Chrome | 52.94% |
IE | 44.32% |
FF | 1.97% |
IE版本占有率
浏览器 | 占有率 |
---|---|
IE6 | 6.55% |
IE7 | 0.57% |
IE8 | 27.33% |
IE9 | 9.87% |
IE10 | <5% |
上传数据统计
来源:百度相册
大小区间 | (0,100K) | [100K,300K) | [300K,500K) | [500K,800K) | [800K,1M) | [1M,3M) | [3M,5M) | [5M,7M) | [7M,9M) | [9M,11M) | [11M,15M) | [15M,20M) | [20M,30M) | [30M,50M) |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
百分比 | 41.86% | 21.25% | 7.89% | 5.18% | 2.94% | 13.04% | 4.78% | 2.22% | 0.50% | 0.16% | 0.11% | 0.04% | 0.02% | 0.01% |
功能调研
文件选择
方式 | IE6 | IE7 | IE8 | IE9 | IE10 | Chrome | FF |
---|---|---|---|---|---|---|---|
单选 | O | O | O | O | O | O | O |
多选 | X | X | X | X | O | O | O |
拖拽 | X | X | X | X | O | O | O |
文件信息
属性 | 说明 | IE9 | IE10 | Chrome | FF | iOS | Android |
---|---|---|---|---|---|---|---|
name | 文件名称 | X | O | O | O | 6.0 | 3.0 |
lastModifiedDate | 文件最后修改日期 | X | O | O | O | 6.0 | 3.0 |
size | 文件大小 | X | O | O | O | 6.0 | 3.0 |
type | 文件类型,HTTP协议中Content-Type格式。 | X | O | O | O | 6.0 | 3.0 |
文件内容读取
方法 | 说明 | IE10 | Chrome | FF | iOS | Android |
---|---|---|---|---|---|---|
readAsDataURL | 按DataURL格式读取文件内容,适用于图片文件。 | O | O | O | 6.0 | 3.0 |
readAsText | 读取文本文件内容。 | O | O | O | 6.0 | 3.0 |
readAsArrayBuffer | 按字节读取。 | O | O | O | 6.0 | 3.0 |
readAsBinaryString | 读取文件并返回二进制字符串。 | X | O | O | 6.0 | 3.0 |
图片预览
方式 | IE10 | Chrome | FF | iOS | Android |
---|---|---|---|---|---|
readAsDataURL | O | O | O | 6.0 | 3.0 |
createObjectURL | O | O | O | 6.0 | 4.0 |
图片裁剪
IE10 | Chrome | FF | iOS | Android |
---|---|---|---|---|
O | O | O | 6.0 | 3.0 |
图片压缩
IE10 | Chrome | FF | iOS | Android |
---|---|---|---|---|
O | O | O | 6.0 | 3.0 |
Javascript 与 Flash通信
考虑到Javascript在某些情况下的局限性,可能需要与Flash协作,因此需要Javascript具有与Flash通信的能力。
序列化数据通信:支持;但是需要读取文件序列化后的内容,比如BASE64,内存占用可能会比较大;
二进制数据通信:待验证;
异步文件上传
方式 | 说明 | IE10 | Chrome | FF |
---|---|---|---|---|
XHR send(FormData) | 构造FormData发送,HTTP请求与FORM提交一致,后端无需做额外适配通用。 | O | O | O |
XHR sendAsBinary | 结合FileReader的readAsBinaryString使用。 | X | O1 | O |
XHR send(Blob) | 直接发送File对象,浏览器不会进行编码而是直接把Blob内容作为POST DATA,需要后端自行解析。 | O* | O* | O* |
XHR send Base64 | 通过FileReader的readAsDataURL方法获取图片Base64编码,以文本方式发送到后端处理,需要后端自行解析。 | O* | O* | O* |
WebSocket send binary | 通过FileReader获得Blob或ArrayBuffer,通过WebSocket发送到后端,需要后端获取数据并解析。 | O* | O* | O* |
1可模拟; *服务器端需要适配;
性能评测
评测的两个方面:
- HTML5与Flash共同拥有的功能进行对比;
- HTML5某个功能的不同实现进行比较;
预览
图片预览在HTML5和Flash均可实现,同时HTML5本身有两种实现方式,因此同时参与评测。
下图为使用Flash
、HTML5 DataURL
、HTML5 ObjectURL
、HTML5 DataURL with resize
、HTML5 ObjectURL with resize
五种方式进行图片预览时所消耗的内存比较:
方式 | 100K | 300K | 500K | 800K | 1M | 3M | 5M | 10M | ALL | Extreme(600M / 274 Files) |
---|---|---|---|---|---|---|---|---|---|---|
Flash | 1 | 1 | 1 | 1 | 1 | 4 | 7 | 22 | 50 | 650 |
H5 DataURL | 2.6 | 12.6 | 18.2 | 22.7 | 27.6 | 122 | 172 | 252 | 591 | N/A |
H5 ObjectURL | 1.1 | 3.5 | 6.1 | 8.4 | 9.5 | 69 | 75 | 88 | 274 | N/A |
H5 DataURL Resize | 4.2 | 6.5 | 12 | 16 | 24 | 59 | 105 | 185 | 245 | N/A |
H5 ObjectURL Resize | 1 | 1 | 1 | 1.7 | 1.7 | 4.5 | 10.5 | 18 | 30 | 150 |
测试时依次预览100K、300K、500K、800K、1M、3M、5M和10M的图片,以及批量预览上述图片,而针对Flash
以及ObjectURL with resize
还进行了批量274个图片文件共计600M大小的预览测试。
从测试结果来看,HTML5 ObjectURL with resize
方案最理想,尤其在批量上传时内存能够有效的回收;其次是Flash
,但在批量上传时内存回收不明显,剩余其他几个方案内存消耗都比较大。
压缩
压缩测试是针对一张10M(5134*3456px)JPEG图片,按不同压缩质量压缩,比较压缩后的图片大小以及压缩所消耗的时间。
HTML5 ObjectURL
图片质量(%) | 100 | 90 | 80 | 70 | 60 | 50 |
---|---|---|---|---|---|---|
耗时(ms) | 543 | 500 | 495 | 481 | 472 | 428 |
大小(KB) | 2449 | 741 | 512 | 406 | 340 | 296 |
Flash
图片质量(%) | 100 | 90 | 80 | 70 | 60 | 50 |
---|---|---|---|---|---|---|
耗时(ms) | 4768 | 3555 | 3295 | 3205 | 3243 | 3137 |
大小(KB) | 2945 | 895 | 608 | 483 | 407 | 356 |
压缩耗时比较
压缩大小比较
从测试数据来看,相同质量下,Flash压缩后的图片比HTML5的要大20%左右,而Flash压缩所消耗的时间则是HTML5的3.5倍。
评测总结
- 兼容性:与HTML5相比,Flash兼容性在PC端全面占优,但是在移动端则正好相反;HTML5在IE10+、Chrome以及Firefox中均有较好的兼容性和稳定性;
- 能力:Flash在文件上传方面的功能HTML5均能覆盖,包括多选、剪裁、压缩、预览、异步上传等,而且HTML5还能通过拖拽来选择文件,因此在这方面HTML5更具优势;
- 性能:在图片预览和压缩两种操作中,无论是内存消耗还是时间消耗,HTML5的性能都优于Flash;此外,使用HTML5实现时需要载入的文件比Flash更小,在载入速度方面HTML5也占据优势;
结论
从评测数据来看,HTML5在可用的环境中各方面均优于Flash,因此对于Chrome、IE10+、Firefox、Safari等支持HTML5的环境中使用HTML5完整实现上传功能,而在不支持HTML5的环境中使用Flash。
此外,尽量不考虑在HTML4环境中使用JS来实现批量的文件上传功能,一方面需要考虑各种兼容性问题,这会给稳定性带来考验;另一方面,HTML4环境中如果需要实现图片预览将会遇到很多问题,很可能需要在JS版本中维护多套实现;总之,在HTML4中实现JS的批量上传是一件投入产出比很低的事情。