記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<h3 data-bm="56" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: block; font: 20px / 22px Roboto, sans-serif; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">&nbsp;フロントエンド (HTML + JavaScript)</h3><p data-bm="57" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 8px 0px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">ドラッグアンドドロップでファイルをアップロードするためのHTMLとJavaScriptを用意します。&lt;div id=&quot;dropZone&quot; style=&quot;border: 2px dashed #ccc; padding: 20px; text-align: center;&quot;&gt;&nbsp; &nbsp; ドラッグ＆ドロップでファイルをアップロード&lt;/div&gt;&lt;input type=&quot;file&quot; id=&quot;fileInput&quot; style=&quot;display: none;&quot; multiple /&gt;&lt;script&gt;&nbsp; &nbsp; const dropZone = document.getElementById(&quot;dropZone&quot;);&nbsp; &nbsp; const fileInput = document.getElementById(&quot;fileInput&quot;); &nbsp; &nbsp; dropZone.addEventListener(&quot;dragover&quot;, (e) =&gt; {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; dropZone.style.borderColor = &quot;blue&quot;;&nbsp; &nbsp; }); &nbsp; &nbsp; dropZone.addEventListener(&quot;dragleave&quot;, () =&gt; {&nbsp; &nbsp; &nbsp; &nbsp; dropZone.style.borderColor = &quot;#ccc&quot;;&nbsp; &nbsp; }); &nbsp; &nbsp; dropZone.addEventListener(&quot;drop&quot;, (e) =&gt; {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; dropZone.style.borderColor = &quot;#ccc&quot;;&nbsp; &nbsp; &nbsp; &nbsp; const files = e.dataTransfer.files;&nbsp; &nbsp; &nbsp; &nbsp; uploadFiles(files);&nbsp; &nbsp; }); &nbsp; &nbsp; function uploadFiles(files) {&nbsp; &nbsp; &nbsp; &nbsp; const formData = new FormData();&nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i &lt; files.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formData.append(&quot;files&quot;, files[i]);&nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; fetch(&quot;/File/Upload&quot;, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: &quot;POST&quot;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: formData,&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then(response =&gt; response.json())&nbsp; &nbsp; &nbsp; &nbsp; .then(data =&gt; alert(&quot;アップロード成功！&quot;))&nbsp; &nbsp; &nbsp; &nbsp; .catch(error =&gt; alert(&quot;エラーが発生しました&quot;));&nbsp; &nbsp; }&lt;/script&gt;ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー<h3 data-bm="59" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: block; font: 20px / 22px Roboto, sans-serif; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">コントローラー (MVCアクションメソッド)</h3><p data-bm="60" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 8px 0px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">アップロードされたファイルを受け取り、データベースに保存するアクションメソッドを作成します。using System;using System.IO;using System.Web;using System.Web.Mvc;using YourNamespace.Models; // データベースモデルの名前空間 public class FileController : Controller{&nbsp; &nbsp; [HttpPost]&nbsp; &nbsp; public ActionResult Upload(IEnumerable&lt;HttpPostedFileBase&gt; files)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; if (files != null)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach (var file in files)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (file != null &amp;&amp; file.ContentLength &gt; 0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // ファイルをバイト配列に変換&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; using (var memoryStream = new MemoryStream())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; file.InputStream.CopyTo(memoryStream);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; byte[] fileData = memoryStream.ToArray(); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // データベースに保存&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dbContext = new YourDbContext(); // データベースコンテキスト&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var uploadedFile = new UploadedFile&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FileName = file.FileName,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ContentType = file.ContentType,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Data = fileData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; UploadDate = DateTime.Now&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dbContext.UploadedFiles.Add(uploadedFile);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dbContext.SaveChanges();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; return Json(new { success = true });&nbsp; &nbsp; }}ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー<h3 data-bm="62" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: block; font: 20px / 22px Roboto, sans-serif; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">データベースモデル</h3><p data-bm="63" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 8px 0px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">ファイルを保存するためのテーブルに対応するモデルを作成します。using System; public class UploadedFile{&nbsp; &nbsp; public int Id { get; set; }&nbsp; &nbsp; public string FileName { get; set; }&nbsp; &nbsp; public string ContentType { get; set; }&nbsp; &nbsp; public byte[] Data { get; set; }&nbsp; &nbsp; public DateTime UploadDate { get; set; }}ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー<h3 data-bm="65" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: block; font: 20px / 22px Roboto, sans-serif; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">データベースマイグレーション</h3><p data-bm="66" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 8px 0px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Entity Frameworkを使用している場合、マイグレーションを実行してテーブルを作成します。Add-Migration AddUploadedFileTableUpdate-Databaseーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー<h3 data-bm="68" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; display: block; font: 20px / 22px Roboto, sans-serif; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">ポイント</h3><ul data-bm="69" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">ファイルサイズの制限: 大きなファイルを扱う場合、<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">web.config</code>でアップロードサイズの制限を設定してください。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">セキュリティ: アップロードされたファイルの種類を検証し、不正なファイルが保存されないように注意してください。</li></ul><p data-bm="70" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 8px 0px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: Roboto, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">これで、ドラッグアンドドロップでアップロードされたファイルをデータベースに登録する仕組みが完成します！

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる