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

红叶舞秋山
  • 440

关于图片上传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...

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

回复
阅读 5.6k
2 个回答
  1. 我觉得从上传方式来分的话只有用FormData和不用FormData的区别吧,用的好处是可以轻松的封装Blob上传(大文件还能利用blob分片),不用的话通常是放弃Blob方案了。

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

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

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

lutreer
  • 4
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏