Image Upload 기능 구현 방법 - Tirrilee/TechTalk GitHub Wiki

Image Upload 기능 구현 방법

  1. NuGet Package Download - jQuery.filedrop Download : 파일 Drag & Drop을 실행하게 해주는 Package

  2. View

@{
    ViewBag.Title = "Home Page";
}
<h2> Drag & Drop File Upload</h2>
<div id="dropArea">
    Drop Your File in Here
</div>
<h4>Upload Files : </h4>
<ul class="list-group" id="uploadList">

</ul>
<style>
    #dropArea {
        background:#b5b5b5;
        border:black dashed 1px;
        height:50px;
        text-align:center;
        color:#fff;
    }
    .active-drop {
        background: #77bafa !important;
        border: solid 2px blue !important;
        opacity: .5;
        color: black !important;
    }
</style>

@section Scripts{
    <script src="~/Scripts/jquery.filedrop.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#dropArea').filedrop({
                url: '@Url.Action("UploadFiles")',
                allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif'],
                allowedfileextensions: ['.jpg', '.jpeg', '.png', '.gif'],
                paramname: 'files',
                maxfiles: 5,
                maxfilesize: 5,
                dragOver: function () {
                    $('#dropArea').addClass('active-drop');
                },
                dragLeave: function () {
                    $('#dropArea').removeClass('active-drop');
                },
                drop: function () {
                    $('#dropArea').removeClass('active-drop');
                },
                afterAll: function (e) {
                    $('#dropArea').html('file(s) uploaded successfully');
                },
                uploadFinished: function (i, file, response, time) {
                    $('#uploadList').append('<li class="list-group-item">' + file.name + '</li>');
                }
            })
        })
    </script>
}
  1. Controller
[HttpPost]
public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)
{
    foreach(var file in files)
    {
        // string fileName  = Path.GetExtension(file.FileName);                  // 확장자명 뽑기
        string filePath     = Guid.NewGuid() + Path.GetExtension(file.FileName); // 새로운 이름 생성
        int fileSize        = file.ContentLength/1000;                           // KB

        filePath            = "NewImageName" + Path.GetExtension(file.FileName);
        //file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), filePath));
        // Here you can write conde for save this information in your database if you want
    }
    return Json("file uploaded successfully");
}
⚠️ **GitHub.com Fallback** ⚠️