Dropzone JSで1ファイルのみのアップロードにして、サムネイルをドロップエリア枠いっぱいに表示する方法を実施したく、検証中のコードですが記載します。
うまくいったら、あとで更新はしたいと思います。
javascriptとcssがまだ不完全なので見直し中です。
- 表示方法が少し微妙
- Dropzoneのイベントまわりの作り込みができていない。
- アップロード済みの画像をドラッグした場合、ファイル名とサイズ情報が画像中央に表示できていない
どなたか良い案があったら教えて！
サーバー側はASP.NET MVC5での手順です。
アップロード時は画像をContent/images/tempにアップロード、別ボタンで登録時に保存先のパスをDBに登録する予定です。
DBに画像パスがある場合、画像の初期表示は下記の部分でパス設定して行います。
this.displayExistingFile(mockFile, imageUrl);
サンプルコードではDBを更新する登録ボタンと、その処理は含めてません。
index.cshtmlでは、画面半分のエリア、bootstrapのcol-md-6の部分に表示してます。
index.cshtml
@model WebApplication.Models.Member
@{
ViewBag.Title = "Index";
}
<divclass="row"><divclass="col col-md-6">
@using (Ajax.BeginForm("Upload", "Members", new AjaxOptions { HttpMethod = "POST" }, new { @class = "dropzone", id = "myAwesomeDropzone", enctype = "multipart/form-data" })) {
@Html.AntiForgeryToken()
}
<!-- <input type="file" id="reference" /> をフォーム外に置くかも--></div><divclass="col col-md-6"></div></div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>// Create dropzones programmaticallyDropzone.autoDiscover=false;Dropzone.options.myAwesomeDropzone={paramName:"file",acceptedFiles:".jpg",maxFiles:1,maxFilesize:0.5,// MBthumbnailWidth:null,thumbnailHeight:null,init:function(){// DBに画像パスがある時はここでセットするvarimageUrl="/Content/images/temp/test.jpg";if(imageUrl!=""){varfileName="File name"varmockFile={name:fileName,size:12345};this.displayExistingFile(mockFile,imageUrl);this.options.maxFiles=0;this.options.autoProcessQueue=false;}else{this.options.maxFiles=1;this.options.autoProcessQueue=true;}this.on("thumbnail",function(file,dataUrl){$(".dz-image").last().find("img").attr({width:"100%",height:"100%"});}),this.on("success",function(file){$(".dz-image").css({"width":"100%","height":"auto"});}),this.on("error",function(file,error){alert(error.Message);this.removeFile(file);}),this.on("maxfilesexceeded",function(file){this.removeFile(file);});}};varmyDropzone=newDropzone("#myAwesomeDropzone");</script>
}
site.css
/* Dropzone css上書き */.dropzone.dz-preview{/* width: 600px !important; */}.dropzone{min-height:600px!important;border:1pxsolidrgba(0,0,0,0.3)!important;padding:1px!important;}.dz-preview{min-height:600px!important;margin:1px!important;}.dropzone.dz-preview.dz-file-preview.dz-image{border-radius:1px!important;}.dropzone.dz-preview.dz-details.dz-filenamespan,.dropzone.dz-preview.dz-details.dz-sizespan{border-radius:1px!important;}.dropzone.dz-preview.dz-image{border-radius:1px!important;width:600px!important;height:auto!important;}.dropzone.dz-preview.dz-progress{border-radius:1px!important;}.dropzone.dz-preview.dz-error-message{border-radius:1px!important;}MembersController.cs
usingSystem;usingSystem.Collections.Generic;usingSystem.Drawing;usingSystem.IO;usingSystem.Linq;usingSystem.Net;usingSystem.Threading.Tasks;usingSystem.Web;usingSystem.Web.Configuration;usingSystem.Web.Mvc;usingWebApplication.Models;namespaceWebApplication.Controllers{publicclassMembersController:Controller{// GET: /Members/publicasyncTask<ActionResult>Index(){returnView();}[HttpPost][ValidateAntiForgeryToken]publicasyncTask<ActionResult>Upload(HttpPostedFileBasefile){if(file==null){Response.StatusCode=(int)HttpStatusCode.BadRequest;returnJson(new{Message="ファイルのアップロードが実行できません。"});}stringfileName=Path.GetFileName(file.FileName);stringfileNameExtension=Path.GetExtension(fileName);string[]permit=newstring[]{".jpg"};if(!permit.Contains(fileNameExtension)){Response.StatusCode=(int)HttpStatusCode.BadRequest;returnJson(new{Message="jpg以外のファイルはアップロードが実行できません。"});}Bitmapbitmap=(Bitmap)Bitmap.FromStream(file.InputStream);varbitmapSize=new{Width=bitmap.Width,Height=bitmap.Height};bitmap.Dispose();if(bitmapSize.Width>1000||bitmapSize.Height>1000){Response.StatusCode=(int)HttpStatusCode.BadRequest;returnJson(new{Message="W1000×H1000ピクセルより大きい解像度のファイルはアップロードが実行できません。"});}if(file.ContentLength>5000000){Response.StatusCode=(int)HttpStatusCode.BadRequest;returnJson(new{Message="500KBより大きいサイズのファイルはアップロードが実行できません。"});}stringserverDirectory="Content\\images\\temp";// string serverDirectory = WebConfigurationManager.AppSettings["TempImagePath"];serverDirectory=Path.Combine(Server.MapPath(@"\"),serverDirectory);if(!Directory.Exists(serverDirectory)){Directory.CreateDirectory(serverDirectory);}DateTimenow=DateTime.Now;stringsaveFileName=now.ToString("yyyyMMdd-HHmmss")+now.Millisecond+fileNameExtension;stringsaveFilePath=Path.Combine(serverDirectory,saveFileName);if(System.IO.File.Exists(saveFilePath)){Response.StatusCode=(int)HttpStatusCode.BadRequest;returnJson(new{Message="ファイルのアップロードに失敗しました。再度実行して下さい。"});}try{file.SaveAs(saveFilePath);varjson=new{FilePath=saveFilePath};Response.StatusCode=(int)HttpStatusCode.OK;returnJson(json);}catch(Exceptione){// 例外処理など }Response.StatusCode=(int)HttpStatusCode.BadRequest;returnJson(new{Message="ファイルのアップロードが実行できません。"});}}}