如何在JavaScript中實現(xiàn)拖放文件

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

網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù)團(tuán)隊是一支充滿著熱情的團(tuán)隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時竭誠為客戶提供服務(wù)是我們的理念。成都創(chuàng)新互聯(lián)公司把每個網(wǎng)站當(dāng)做一個產(chǎn)品來開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！

我們來看一個示例

代碼如下

SimpleDragDrop.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    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 + '<br/>';
      }
    }    
function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = 'copy';
    }    
    function PageLoad(evt) {      
var dropFrame = document.getElementById('DropFrame');
      dropFrame.addEventListener('dragover', handleDragOver, false);
      dropFrame.addEventListener('drop', handleFileSelect, false);
    }  
</script>
</head>
<body onload="PageLoad();">
  <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">把文件放在這里。</div>
  <div id="output"></div>
</body>
</html>

說明：

顯示頁面后，執(zhí)行onload事件的PageLoad（）函數(shù)。
調(diào)用document.getElementById（）以獲取接受拖放的區(qū)域的元素。在這段時間內(nèi)，我們會將“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活動中執(zhí)行的代碼如下。在事件的第一個參數(shù)（以下代碼中是evt）的ddataTransfer.files下放文件的一覽并保存。文件的取得與文件選擇箱一樣訪問排列的要素，取得文件對象。在name屬性中保存了文件名，size屬性，文件大小，lastmdifitifielDato的更新時間。

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

Drop事件中執(zhí)行的代碼如下。在事件的第一個參數(shù)（以下代碼中是evt）的ddataTransfer.files下放文件的一覽并保存。至于文件的獲取，它訪問數(shù)組的元素，如文件選擇框，并獲取文件對象。文件名存儲在name屬性中，文件大小存儲在size屬性中，更新日期存儲在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 + '<br/>';
      }
    }

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

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

如何在JavaScript中實現(xiàn)拖放文件

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

如何在JavaScript中實現(xiàn)拖放文件

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

如何在JavaScript中實現(xiàn)拖放文件

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = 'copy';
    }    
function execDrop(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 + '<br/>';
      }
    }  
 </script>
 </head>
 <body>
  <div id="DropFrame" ondragover="handleDragOver(event);" ondrop="execDrop(event);"
       style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">把文件放在這里。</div>
  <div id="output"></div>
 </body>
 </html>

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

網(wǎng)頁名稱：如何在JavaScript中實現(xiàn)拖放文件
當(dāng)前路徑：http://redsoil1982.com.cn/article44/iidgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、、品牌網(wǎng)站建設(shè)、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容