JavaScript でファイルをドラッグアンドドロップする方法-jsチュートリアル-php.cn

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

不言

リリース： 2018-12-01 11:13:40

オリジナル

2682 人が閲覧しました

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 サイトの他の関連記事を参照してください。