javascript - HTML5 上传图片 的几种方式的疑惑

Question

关于图片上传flash的方式不谈。通过查看各种上传插件发现 利用ajax传输图片，貌似有三种方式，不知道这三种方式的区别和兼容性问题在哪里。

第一种为 formData 方式，直接把input的file,apppend到formData对象中。最后调用xhr的send(formDate)即可传输图片。（大部分是此种方式）

第二种为 base64 方式 ，利用FileReader 对象的readAsDataURL(file); 读出 base64的图片，最后调用xhr的send(base64)即可传输图片。 （七牛支持这种上传）

第三种 为base64转二进制和formData 结合的， 先是将base64的图片url数据转换为Blob，然后append到formData对象中再发送。 为什么要多此一举？ （利用FileReader和FormData实现图片预览和上传(base64转二进制文件 http://blog.csdn.net/hsany330...）

请大师们给解个惑 实在想不明白了

Answer 1

1. 我觉得从上传方式来分的话只有用FormData和不用FormData的区别吧，用的好处是可以轻松的封装Blob上传（大文件还能利用blob分片），不用的话通常是放弃Blob方案了。

2. base64一般作为备选方案，因为二进制文件用这货编码的话，会比原文件还大。

3. 需要先转成base64再转成blob的原因是，前端压缩都是用Canvas方案，先绘制再读取。Canvas本来有个可以直出blob的toBlob()方法，但是浏览器支持不太理想，所以只能先调toDataURL()转成base64，再回填到blob里，曲线救国。

4. 可能是移动端做的多吧，我个人更倾向于先在前端压缩下再上传的方案，因为一方面，客户端的性能都是足够处理的，客户端处理好也不会麻烦服务器；另一方面，更小的文件上传也会更快，从而增强用户体验。

Answer 2

我只看见你你最后的问号。我只想说接口支持的类型，是要string还是file。转来转去不就是转成接口支持的类型。