拖拽预览图片

1.分析 拖拽预览图片 =拖拽 上传图片 + 预览图片 两个事件 以前做过图片上传预览,都是假预览,首先要把图片上传到服务器 再从服务器拿到图片去预览,现在发现h5有新的方法可以在本地就预览到图片:FileReader方法 利用他可以读取到文件然后转base64的FileReader.readAsDataURL(file) 把图片读取为base64就能够去赋值给image标签的src属性里面去显示图片 还有一个就是拖拽 拖拽只需要dragover,drop两个属性就可以达到效果 下面是代码截图

#1 拖拽

这样 file 对象就拿到了文件对象

文件的结构大概长这样

#2 预览 就这样 拖拽就搞定了 并且拿到了文件对象,接下来就是要去进行预览的操作了

整一个空的image标签占个位置 可以先把样式大小都写好

new 一个FileReader对象 然后读一下刚才获取到的文件对象,注册一个读取完成之后的函数 ,当读取完成之后把读取的base64结果赋值给image的src就完事了

就是这么的轻松简单且愉快的完成了这次的操作