HTML 5拖拽預(yù)覽
作者：菜鳥程序猿
代碼中先分別監(jiān)聽這幾個(gè)事件，取消瀏覽器默認(rèn)的行為，然后利用HTML5中的File及FileReader判斷讀取拖拽的文件。注意，只能拖拽圖片和txt
本文用到的知識(shí)
HTML5中的File及FileReader接口
相關(guān)資料：
Using files from web applications
運(yùn)行效果
注：大家把自己電腦上的圖片或txt文件拖到上面的DIV中即可看到效果
源碼
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>HTML5文件拖拽預(yù)覽Demo</title>
- <style type="text/css">
- h1{
- 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;
- }
- </style>
- <script type="text/javascript">
- 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 = "<pre>" + this.result + "</pre>";
- dest.style.background = "white";
- }
- }
- else {
- dest.innerHTML = "暫不支持此類文件的預(yù)覽";
- dest.style.background = "white";
- }
- }, false);
- }
- //設(shè)置頁(yè)面屬性，不執(zhí)行默認(rèn)處理（拒絕被拖放）
- document.ondragover = function(e){e.preventDefault();};
- document.ondrop = function(e){e.preventDefault();}
- window.onload=init;
- </script>
- </head>
- <body>
- <h1>HTML5文件拖拽預(yù)覽Demo</h1>
- <div id="show">
- 文件預(yù)覽區(qū)，僅限圖片和txt文件
- </div>
- </body>
- </html>
主要代碼解析
樣式部分就不說了，很簡(jiǎn)單
dragover、dragend、drop是三個(gè)與拖拽相關(guān)的事件。
dragover表示被拖放的元素正在本元素范圍內(nèi)移動(dòng)
dragend表示拖放操作結(jié)束
drop表示有其他元素被拖放到了本元素中
代碼中先分別監(jiān)聽這幾個(gè)事件，取消瀏覽器默認(rèn)的行為，然后利用HTML5中的File及FileReader判斷讀取拖拽的文件。
如果文件是圖片，就用FileReader的readAsDataURL方法將圖片讀取為DataURL字符串存入內(nèi)存，并顯示在DIV中。
如果文件是txt文本，就用FileReader的readAsText方法將文件讀取為文本（默認(rèn)為UTF-8格式），放到內(nèi)存中，然后顯示在DIV中。
原文地址：http://www.cnblogs.com/jscode/archive/2012/04/23/2467149.html
【編輯推薦】
責(zé)任編輯：張偉
來源：
菜鳥程序猿的博客
