HTML5怎么实现拖拽预览

本篇内容主要讲解"HTML5怎么实现拖拽预览"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"HTML5怎么实现拖拽预览"吧!

源码

                             
HTML5文件拖拽预览Demo
     
     文件预览区，仅限图片和txt文件      
  

主要代码解析

样式部分就不说了，很简单

dragover、dragend、drop是三个与拖拽相关的事件。

dragover表示被拖放的元素正在本元素范围内移动

dragend表示拖放操作结束

drop表示有其他元素被拖放到了本元素中

代码中先分别监听这几个事件，取消浏览器默认的行为，然后利用HTML5中的File及FileReader判断读取拖拽的文件。

如果文件是图片，就用FileReader的readAsDataURL方法将图片读取为DataURL字符串存入内存，并显示在DIV中。

如果文件是txt文本，就用FileReader的readAsText方法将文件读取为文本（默认为UTF-8格式），放到内存中，然后显示在DIV中。

到此，相信大家对"HTML5怎么实现拖拽预览"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！