html5之文件与图片拖放上传

前一阵子听了前端的一个分享,其中介绍了HTML5中的一些新特性,特别感兴趣的是文件上传拖放上传:

今晚前端同事提起,刚查了下资料,有些小失望,不过功能真的很实用。

我的理解是:

    对于图片他们是编码成了data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gASeGlhb25laTIyNDgxMDYzN//bAEMAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwoLCw0OE。。。类似于这样的格式,其实就是bas64编码,浏览器所谓支持的话就是能对这种格式的数据完整的解析后然后在浏览器上展现图片;文件也类似;

     另外对于编码除了base64而外,还有二进制等编码等,只是编码不同而已。

     对于采用的新的方式实现后,拖放的数据应该已经上传到服务器了,前端进度条的实现等(内存中)。而后端要获取数据的方式跟原来是一样的。

     HTML5这些功能的更新是使前端展现更丰富。


    至于如果实现看了下代码,稍微了解下,只是以前实现过ajax的一些细节,所以才有兴趣研究下此特性。因为对xmlhttprequest感兴趣。而本次更新在这方便优化很大。

    下面是两个HTML5在文件拖放与上传不错的文件,有兴趣的可以去研究下。在此也记录下:

入门中文博文

http://gandli.blog.163.com/blog/static/3084958420101023274347/

xmlhttprequest的API官网。

https://developer.mozilla.org/en/XMLHttpRequest#sendAsBinary%28%29


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值