文件上传 数据对比

https://github.com/zhangsichu/UploadDemo/tree/e5997e2cf9b200f74aaa69db53798c8e625f4244/UploadDemo/H5Webuploader 

。文件（图片）上传调研

• 浏览器占有率
• 上传统计数据
• 功能调研
  • 文件选择
  • 文件信息
  • 文件内容读取
  • 图片预览
  • 图片裁剪
  • 图片压缩
  • Javascript 与 Flash通信
  • 异步文件上传
• 性能评测
  • 预览
  • 压缩
• 评测总结
• 结论

浏览器占有率

来源:百度相册

浏览器占有率

浏览器	占有率
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*

¹可模拟； ^*服务器端需要适配；

性能评测

评测的两个方面：

• 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的批量上传是一件投入产出比很低的事情。