日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
HTML5拖拽預覽

本文用到的知識

HTML5中的File及FileReader接口

相關資料：

Using files from web applications

File API

運行效果

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

源碼

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.      
    5.   
  
  
  5.     HTML5文件拖拽預覽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.  
    41.   
  
  
  41.  
    42.   
  
  
  42.     
    HTML5文件拖拽預覽Demo
     
    43.   
  
  
  43.      
    44.   
  
  
  44.     文件預覽區(qū)，僅限圖片和txt文件  
    45.   
  
  
  45.     
 
  •  
  •  

    • 主要代碼解析

    樣式部分就不說了，很簡單

    dragover、dragend、drop是三個與拖拽相關的事件。

    dragover表示被拖放的元素正在本元素范圍內移動

    dragend表示拖放操作結束

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

    代碼中先分別監(jiān)聽這幾個事件，取消瀏覽器默認的行為，然后利用HTML5中的File及FileReader判斷讀取拖拽的文件。

    如果文件是圖片，就用FileReader的readAsDataURL方法將圖片讀取為DataURL字符串存入內存，并顯示在DIV中。

    如果文件是txt文本，就用FileReader的readAsText方法將文件讀取為文本（默認為UTF-8格式），放到內存中，然后顯示在DIV中。

    原文地址：http://www.cnblogs.com/jscode/archive/2012/04/23/2467149.html


    網站名稱：HTML5拖拽預覽
    本文地址：http://www.5511xx.com/article/dppjgho.html