這篇文章將為大家詳細(xì)講解有關(guān)如何在JavaScript中實(shí)現(xiàn)拖放文件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、斗門ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的斗門網(wǎng)站制作公司

我們來(lái)看一個(gè)示例

代碼如下

SimpleDragDrop.html

    
  


  
把文件放在這里。
  

說(shuō)明：

顯示頁(yè)面后，執(zhí)行onload事件的PageLoad（）函數(shù)。
調(diào)用document.getElementById（）以獲取接受拖放的區(qū)域的元素。在這段時(shí)間內(nèi)，我們會(huì)將“DropFrame”ID的Div標(biāo)記部分設(shè)置為接受拖放操作。調(diào)用獲得到的元素的addEventListener（）方法，并添加'dragover'和'drop'事件。在上面的代碼中，如果發(fā)生了“dragover”事件，則運(yùn)行handleDragOver（）函數(shù)中，“如果發(fā)生了' drop '事件，則執(zhí)行hanleFileSelece（）函數(shù)。

在DrawOver中執(zhí)行以下代碼。
stopPropagation，preventDefault將取消現(xiàn)有的行為。還要在dataTransfer.dropEffect屬性中指定結(jié)果類型。

function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = 'copy';
    }

在Drop活動(dòng)中執(zhí)行的代碼如下。在事件的第一個(gè)參數(shù)（以下代碼中是evt）的ddataTransfer.files下放文件的一覽并保存。文件的取得與文件選擇箱一樣訪問(wèn)排列的要素，取得文件對(duì)象。在name屬性中保存了文件名，size屬性，文件大小，lastmdifitifielDato的更新時(shí)間。

將獲得的值輸出到id = outpud的標(biāo)簽區(qū)域。

Drop事件中執(zhí)行的代碼如下。在事件的第一個(gè)參數(shù)（以下代碼中是evt）的ddataTransfer.files下放文件的一覽并保存。至于文件的獲取，它訪問(wèn)數(shù)組的元素，如文件選擇框，并獲取文件對(duì)象。文件名存儲(chǔ)在name屬性中，文件大小存儲(chǔ)在size屬性中，更新日期存儲(chǔ)在lastModifiedDate中。
它將獲取的值輸出到id = outpud的標(biāo)記區(qū)域。

function handleFileSelect(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      var files = evt.dataTransfer.files; 
      var output = [];      
 for (var i = 0; i < files.length; i++) {
         document.getElementById('output').innerHTML += files[i].name + '(' + files[i].size + ') '
          + files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() +  ' - ' + files[i].type + '
';
      }
    }

運(yùn)行結(jié)果

運(yùn)行該HTML文件。將顯示如下所示的效果。

淡藍(lán)色區(qū)域中有“把文件放在這里”。將文件從資源管理器拖放到該區(qū)域。文件名，文件名，文件大小，最終更新時(shí)間，MIS類型被顯示。

如果您選擇多個(gè)文件并一次顯示它們，將顯示拖放的多個(gè)文件的信息。

補(bǔ)充：還有一種實(shí)現(xiàn)方法，通過(guò)實(shí)現(xiàn)標(biāo)記中的“ondragover”和“ondrop”屬性而不使用addEventListener（）。

    
  
 
 
  
把文件放在這里。
  

 
 

關(guān)于如何在JavaScript中實(shí)現(xiàn)拖放文件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：如何在JavaScript中實(shí)現(xiàn)拖放文件-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/diccco.html