HTML5怎么实现拖拽预览

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

成都网络公司-成都网站建设公司创新互联10年经验成就非凡,专业从事成都做网站、网站设计,成都网页设计,成都网页制作,软文发布平台广告投放等。10年来已成功提供全面的成都网站建设方案,打造行业特色的成都网站建设案例,建站热线:18982081108,我们期待您的来电!

源码

            HTML5文件拖拽预览Demo              h2{              padding:0px;              margin:0px;          }          div#show{              border: 1px solid #ccc;               width: 400px;               height: 300px;              display: -moz-box;              display: -webkit-box;              -moz-box-align: center;              -webkit-box-align: center;              -moz-box-pack: center;              -webkit-box-pack: center;              resize:both;              overflow:auto;          }          div[id^=show]:hover{              border: 1px solid #333;           }          div#main{              width:100%;          }          div#successLabel          {              color:Red;          }          div#content          {              display:none;          }                    function init()           {              var dest = document.getElementById("show");              dest.addEventListener("dragover", function(ev)               {                  ev.stopPropagation();                  ev.preventDefault();              }, false);                        dest.addEventListener("dragend", function(ev)               {                  ev.stopPropagation();                  ev.preventDefault();              }, false);                        dest.addEventListener("drop", function (ev) {                  ev.stopPropagation();                  ev.preventDefault();                            var file = ev.dataTransfer.files[0];                  var reader = new FileReader();                            if (file.type.substr(0, 5) == "image") {                      reader.onload = function (event) {                          dest.style.background = 'url(' + event.target.result + ') no-repeat center';                          dest.innerHTML = "";                      };                      reader.readAsDataURL(file);                  }                  else if (file.type.substr(0, 4) == "text") {                                reader.readAsText(file);                      reader.onload = function (f) {                          dest.innerHTML = "
" + this.result + "
";                          dest.style.background = "white";                      }                  }                  else {                      dest.innerHTML = "暂不支持此类文件的预览";                      dest.style.background = "white";                  }              }, false);          }                    //设置页面属性,不执行默认处理(拒绝被拖放)          document.ondragover = function(e){e.preventDefault();};          document.ondrop = function(e){e.preventDefault();}                    window.onload=init;             

HTML5文件拖拽预览Demo

          文件预览区,仅限图片和txt文件      
  

主要代码解析

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

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

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

dragend表示拖放操作结束

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

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

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

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

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


分享标题:HTML5怎么实现拖拽预览
转载来源:http://scyanting.com/article/jhhojj.html

其他资讯