HTML5怎么实现拖拽预览

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

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

源码

                          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文件