記事詳細

投稿日

2025年10月15日23時51分

タイトル

Drag&Drop されたファイルをデータベースに登録

内容

フロントエンド (HTML + JavaScript)

ドラッグアンドドロップでファイルをアップロードするためのHTMLとJavaScriptを用意します。

ドラッグ＆ドロップでファイルをアップロード

</div>

const dropZone = document.getElementById("dropZone");

const fileInput = document.getElementById("fileInput");

dropZone.addEventListener("dragover", (e) => {

e.preventDefault();

dropZone.style.borderColor = "blue";

});

dropZone.addEventListener("dragleave", () => {

dropZone.style.borderColor = "#ccc";

});

dropZone.addEventListener("drop", (e) => {

e.preventDefault();

dropZone.style.borderColor = "#ccc";

const files = e.dataTransfer.files;

uploadFiles(files);

});

function uploadFiles(files) {

const formData = new FormData();

for (let i = 0; i < files.length; i++) {

formData.append("files", files[i]);

}

fetch("/File/Upload", {

method: "POST",

body: formData,

})

.then(response => response.json())

.then(data => alert("アップロード成功！"))

.catch(error => alert("エラーが発生しました"));

}

</script>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

コントローラー (MVCアクションメソッド)

アップロードされたファイルを受け取り、データベースに保存するアクションメソッドを作成します。

using System;

using System.IO;

using System.Web;

using System.Web.Mvc;

using YourNamespace.Models; // データベースモデルの名前空間

public class FileController : Controller

{

[HttpPost]

public ActionResult Upload(IEnumerable<HttpPostedFileBase> files)

{

if (files != null)

{

foreach (var file in files)

{

if (file != null && file.ContentLength > 0)

{

// ファイルをバイト配列に変換

using (var memoryStream = new MemoryStream())

{

file.InputStream.CopyTo(memoryStream);

byte[] fileData = memoryStream.ToArray();

// データベースに保存

var dbContext = new YourDbContext(); // データベースコンテキスト

var uploadedFile = new UploadedFile

{

FileName = file.FileName,

ContentType = file.ContentType,

Data = fileData,

UploadDate = DateTime.Now

};

dbContext.UploadedFiles.Add(uploadedFile);

dbContext.SaveChanges();

}

return Json(new { success = true });

}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

データベースモデル

ファイルを保存するためのテーブルに対応するモデルを作成します。

using System;

public class UploadedFile

{

public int Id { get; set; }

public string FileName { get; set; }

public string ContentType { get; set; }

public byte[] Data { get; set; }

public DateTime UploadDate { get; set; }

}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

データベースマイグレーション

Entity Frameworkを使用している場合、マイグレーションを実行してテーブルを作成します。

Add-Migration AddUploadedFileTable

Update-Database

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ポイント

ファイルサイズの制限: 大きなファイルを扱う場合、web.configでアップロードサイズの制限を設定してください。
セキュリティ: アップロードされたファイルの種類を検証し、不正なファイルが保存されないように注意してください。

これで、ドラッグアンドドロップでアップロードされたファイルをデータベースに登録する仕組みが完成します！

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧