av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

HTML5拖拽預(yù)覽

本文用到的知識(shí)

HTML5中的File及FileReader接口

相關(guān)資料：

Using files from web applications

File API

運(yùn)行效果

注：大家把自己電腦上的圖片或txt文件拖到上面的DIV中即可看到效果

源碼

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.      
    5.   
  
  
  5.     HTML5文件拖拽預(yù)覽Demo 
    6.   
  
  
  6.      
    7.   
  
  
  7.         h1{  
    8.   
  
  
  8.             padding:0px;  
    9.   
  
  
  9.             margin:0px;  
    10.   
  
  
  10.         }  
    11.   
  
  
  11.         div#show{  
    12.   
  
  
  12.             border: 1px solid #ccc;   
    13.   
  
  
  13.             width: 400px;   
    14.   
  
  
  14.             height: 300px;  
    15.   
  
  
  15.             display: -moz-box;  
    16.   
  
  
  16.             display: -webkit-box;  
    17.   
  
  
  17.             -moz-box-align: center;  
    18.   
  
  
  18.             -webkit-box-align: center;  
    19.   
  
  
  19.             -moz-box-pack: center;  
    20.   
  
  
  20.             -webkit-box-pack: center;  
    21.   
  
  
  21.             resize:both;  
    22.   
  
  
  22.             overflow:auto;  
    23.   
  
  
  23.         }  
    24.   
  
  
  24.         div[id^=show]:hover{  
    25.   
  
  
  25.             border: 1px solid #333;   
    26.   
  
  
  26.         }  
    27.   
  
  
  27.         div#main{  
    28.   
  
  
  28.             width:100%;  
    29.   
  
  
  29.         }  
    30.   
  
  
  30.         div#successLabel  
    31.   
  
  
  31.         {  
    32.   
  
  
  32.             color:Red;  
    33.   
  
  
  33.         }  
    34.   
  
  
  34.         div#content  
    35.   
  
  
  35.         {  
    36.   
  
  
  36.             display:none;  
    37.   
  
  
  37.         }  
    38.   
  
  
  38.      
    39.   
  
  
  39.      
    40.   
  
  
  40.         function init()   
    41.   
  
  
  41.         {  
    42.   
  
  
  42.             var dest = document.getElementById("show");  
    43.   
  
  
  43.             dest.addEventListener("dragover", function(ev)   
    44.   
  
  
  44.             {  
    45.   
  
  
  45.                 ev.stopPropagation();  
    46.   
  
  
  46.                 ev.preventDefault();  
    47.   
  
  
  47.             }, false);  
    48.   
  
  
  48.           
    49.   
  
  
  49.             dest.addEventListener("dragend", function(ev)   
    50.   
  
  
  50.             {  
    51.   
  
  
  51.                 ev.stopPropagation();  
    52.   
  
  
  52.                 ev.preventDefault();  
    53.   
  
  
  53.             }, false);  
    54.   
  
  
  54.           
    55.   
  
  
  55.             dest.addEventListener("drop", function (ev) {  
    56.   
  
  
  56.                 ev.stopPropagation();  
    57.   
  
  
  57.                 ev.preventDefault();  
    58.   
  
  
  58.           
    59.   
  
  
  59.                 var file = ev.dataTransfer.files[0];  
    60.   
  
  
  60.                 var reader = new FileReader();  
    61.   
  
  
  61.           
    62.   
  
  
  62.                 if (file.type.substr(0, 5) == "image") {  
    63.   
  
  
  63.                     reader.onload = function (event) {  
    64.   
  
  
  64.                         dest.style.background = 'url(' + event.target.result + ') no-repeat center';  
    65.   
  
  
  65.                         dest.innerHTML = "";  
    66.   
  
  
  66.                     };  
    67.   
  
  
  67.                     reader.readAsDataURL(file);  
    68.   
  
  
  68.                 }  
    69.   
  
  
  69.                 else if (file.type.substr(0, 4) == "text") {  
    70.   
  
  
  70.           
    71.   
  
  
  71.                     reader.readAsText(file);  
    72.   
  
  
  72.                     reader.onload = function (f) {  
    73.   
  
  
  73.                         dest.innerHTML = "
    " + this.result + "
    ";  
    74.   
  
  
  74.                         dest.style.background = "white";  
    75.   
  
  
  75.                     }  
    76.   
  
  
  76.                 }  
    77.   
  
  
  77.                 else {  
    78.   
  
  
  78.                     dest.innerHTML = "暫不支持此類(lèi)文件的預(yù)覽";  
    79.   
  
  
  79.                     dest.style.background = "white";  
    80.   
  
  
  80.                 }  
    81.   
  
  
  81.             }, false);  
    82.   
  
  
  82.         }  
    83.   
  
  
  83.           
    84.   
  
  
  84.         //設(shè)置頁(yè)面屬性，不執(zhí)行默認(rèn)處理（拒絕被拖放）  
    85.   
  
  
  85.         document.ondragover = function(e){e.preventDefault();};  
    86.   
  
  
  86.         document.ondrop = function(e){e.preventDefault();}  
    87.   
  
  
  87.           
    88.   
  
  
  88.         window.onload=init;  
    89.   
  
  
  89.      
    90.   
  
  
  90.  
    91.   
  
  
  91.  
    92.   
  
  
  92.     
    HTML5文件拖拽預(yù)覽Demo
     
    93.   
  
  
  93.      
    94.   
  
  
  94.     文件預(yù)覽區(qū)，僅限圖片和txt文件  
    95.   
  
  
  95.     
 
  •  
  •  

    • 主要代碼解析

    樣式部分就不說(shuō)了，很簡(jiǎn)單

    dragover、dragend、drop是三個(gè)與拖拽相關(guān)的事件。

    dragover表示被拖放的元素正在本元素范圍內(nèi)移動(dòng)

    dragend表示拖放操作結(jié)束

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

    代碼中先分別監(jiān)聽(tīng)這幾個(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


    當(dāng)前標(biāo)題：HTML5拖拽預(yù)覽
    文章路徑：http://uogjgqi.cn/article/dppjgho.html
    掃二維碼與項(xiàng)目經(jīng)理溝通

    我們?cè)谖⑿派?4小時(shí)期待你的聲音

    解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流