本篇內(nèi)容主要講解“HTML5怎么實現(xiàn)拖拽預(yù)覽”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5怎么實現(xiàn)拖拽預(yù)覽”吧!

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)10年經(jīng)驗成就非凡，專業(yè)從事成都做網(wǎng)站、網(wǎng)站設(shè)計，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，軟文發(fā)布平臺，廣告投放等。10年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：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 = "暫不支持此類文件的預(yù)覽";                      dest.style.background = "white";                  }              }, false);          }                    //設(shè)置頁面屬性，不執(zhí)行默認(rèn)處理（拒絕被拖放）          document.ondragover = function(e){e.preventDefault();};          document.ondrop = function(e){e.preventDefault();}                    window.onload=init;             
HTML5文件拖拽預(yù)覽Demo
          文件預(yù)覽區(qū)，僅限圖片和txt文件