ホームページ > 記事 > ウェブフロントエンド > JavaScript でファイルをドラッグアンドドロップする方法

JavaScript でファイルをドラッグアンドドロップする方法

不言オリジナル: 2018-12-01 11:13:402650ブラウズ

JavaScript でファイルをドラッグアンドドロップする方法でファイルをドラッグアンドドロップする方法はファイルのドラッグアンドドロップをどのように実装しますか?この記事ではJavaScript でファイルをドラッグアンドドロップする方法でファイルをドラッグアンドドロップする方法を使ってドラッグ＆ドロップでファイルを選択する方法を紹介します。具体的な内容を見ていきましょう。

JavaScript でファイルをドラッグアンドドロップする方法でファイルをドラッグアンドドロップする方法

例を見てみましょう

コードは次のとおりです

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(&#39;output&#39;).innerHTML += files[i].name + &#39;(&#39; + files[i].size + &#39;) &#39;
          + files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() +  &#39; - &#39; + files[i].type + &#39;<br/>&#39;;
      }
    }    
function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = &#39;copy&#39;;
    }    
    function PageLoad(evt) {      
var dropFrame = document.getElementById(&#39;DropFrame&#39;);
      dropFrame.addEventListener(&#39;dragover&#39;, handleDragOver, false);
      dropFrame.addEventListener(&#39;drop&#39;, 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>

手順:

ページ表示後、onloadイベントのPageLoad()関数を実行します。
document.getElementById() を呼び出して、ドラッグアンドドロップを受け入れる領域の要素を取得します。この際、「DropFrame」ID の Div タグ部分をドラッグアンドドロップ操作を受け付けるように設定します。取得した要素の addEventListener() メソッドを呼び出し、「dragover」イベントと「drop」イベントを追加します。上記のコードでは、「dragover」イベントが発生すると handleDragOver() 関数が実行され、「drop」イベントが発生すると handleFileSelece() 関数が実行されます。

DrawOver で次のコードを実行します。
stopPropagation、preventDefault は既存の動作をキャンセルします。

 function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = &#39;copy&#39;;
    }

Drop アクティビティで実行されるコードは次のとおりです (次のコードは、evt の ddataTransfer.files から転送されるファイルのリストです)。ファイル選択ボックスと同様に配置の要素にアクセスして取得し、ファイルオブジェクトを更新時刻のラベルエリアに出力します。 id = outpud.

ddataTransfer.files のイベント (以下のコードは evt) の最初のパラメータでファイルの一覧をドロップし、ファイルの取得に関しては配列の要素にアクセスします。ファイル選択ボックスなどのファイルオブジェクトを取得し、name属性にファイル名、lastModifiedDateにファイルサイズを格納します。 id = outpud を指定してタグ領域に値を追加します。

##以下に示すように HTML ファイルを実行します。水色の領域に「ファイルをここに置く」と表示されます。ファイル名、ファイルサイズ、最終更新時刻、MIS タイプが表示されます。
複数のファイルを選択して一度に表示すると、ドラッグ＆ドロップしたファイルの情報が表示される

JavaScript でファイルをドラッグアンドドロップする方法でファイルをドラッグアンドドロップする方法追加：という方法もあります。 addEventListener() ##

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

を使用せずにタグに「ondragover」属性と「ondrop」属性を実装します。

以上がJavaScript でファイルをドラッグアンドドロップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Backbone.js を使用して簡単なビューを作成する方法次の記事：Backbone.js を使用して簡単なビューを作成する方法

続きを見る

JavaScript でファイルをドラッグ アンド ドロップする方法

関連記事

JavaScript でファイルをドラッグアンドドロップする方法