ドラッグ&ドロップでファイル名をリネームしてフォルダに入れるアプリ
ファイルをここにドロップしてください
<!DOCTYPE html>
<html>
<head>
<title>ドラッグ&ドロップでファイル名をリネームしてフォルダに入れるアプリ</title>
</head>
<body>
<h1>ドラッグ&ドロップでファイル名をリネームしてフォルダに入れるアプリ</h1>
<p>ファイルをここにドロップしてください</p>
<script type="text/javascript">
// ドロップされたファイルの名前を返す関数
function getFileName(file) {
var name = file.name;
var newName = prompt("ファイルの新しい名前を入力してください", name); // リネーム画面を表示
if (newName == null || newName == '') { // キャンセルや空文字でリネームしない場合
return name;
}
return newName;
}
// ドロップされたファイルを処理する関数
function handleFileDrop(event) {
event.preventDefault(); // デフォルトの動作をキャンセル（ファイルをブラウザに開かせない）
var files = event.dataTransfer.files; // ドロップされたファイルのリスト
for (var i = 0; i < files.length; i++) {
var file = files[i];
var newName = getFileName(file); // ファイル名のリネーム
var url = window.URL.createObjectURL(file); // ファイルのURLを生成
var link = document.createElement('a'); // ダウンロード用リンクを生成
link.href = url;
link.download = newName; // ダウンロード時のファイル名を指定
document.body.appendChild(link); // リンクをDOMに追加
link.click(); // リンクをクリックしてファイルをダウンロード
document.body.removeChild(link); // DOMからリンクを削除
}
}
// ドラッグ&ドロップを受け付ける要素にイベントリスナーを設定
var dropZone = document.getElementsByTagName('body')[0];
dropZone.addEventListener('dragover', function(event) {
event.preventDefault(); // デフォルトの動作をキャンセル（ファイルをブラウザに開かせない）
dropZone.style.background = '#f0f0f0'; // ドラッグ&ドロップ対象エリアをハイライト
});
dropZone.addEventListener('dragleave', function(event) {
event.preventDefault(); // デフォルトの動作をキャンセル（ファイルをブラウザに開かせない）
dropZone.style.background = ''; // ドラッグ&ドロップ対象エリアのハイライトを解除
});
dropZone.addEventListener('drop', handleFileDrop);
</script>
</body>
</html>