目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便。一直以来也就只是用用,没有想过这些插件背后的实现原理。趁着今天有点时间,也来学习学习。
追根溯源
设想
原理
DataURL浅析
格式
预览实现
HTML
JavaScript控制
预览效果
打包封装
简易封装
使用方式
测试
总结
追根溯源
设想
一开始,按照我的思路,预览可能是这么来实现的。本地选中一张图片,嵌入html的同时会显示图片的本地的绝对路径,然后通过js简单的进行设置,应该就可以实现预览效果了。
但是实际上,目前只有低版本的IE浏览器才能实现这么个效果。究其原因是浏