ホームページ > 記事 > ウェブフロントエンド > JavaScript でファイルをドラッグ アンド ドロップする方法
JavaScript でファイルをドラッグ アンド ドロップする方法
- 不言オリジナル
- 2018-12-01 11:13:402583ブラウズ
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('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>手順:
ページ表示後、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 = 'copy';
}Drop アクティビティで実行されるコードは次のとおりです (次のコードは、evt の ddataTransfer.files から転送されるファイルのリストです)。ファイル選択ボックスと同様に配置の要素にアクセスして取得し、ファイルオブジェクトを更新時刻のラベルエリアに出力します。 id = outpud.
ddataTransfer.files のイベント (以下のコードは evt) の最初のパラメータでファイルの一覧をドロップし、ファイルの取得に関しては配列の要素にアクセスします。ファイル選択ボックスなどのファイルオブジェクトを取得し、name属性にファイル名、lastModifiedDateにファイルサイズを格納します。 id = outpud を指定してタグ領域に値を追加します。
##以下に示すように HTML ファイルを実行します。水色の領域に「ファイルをここに置く」と表示されます。ファイル名、ファイルサイズ、最終更新時刻、MIS タイプが表示されます。
複数のファイルを選択して一度に表示すると、ドラッグ＆ドロップしたファイルの情報が表示される
追加： という方法もあります。 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('output').innerHTML += files[i].name + '(' + files[i].size + ') '
+ files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() + ' - ' + files[i].type + '<br/>';
}
} を使用せずにタグに「ondragover」属性と「ondrop」属性を実装します。以上がJavaScript でファイルをドラッグ アンド ドロップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。