Image Upload 기능 구현 방법 - Tirrilee/TechTalk GitHub Wiki
-
NuGet Package Download - jQuery.filedrop Download : 파일 Drag & Drop을 실행하게 해주는 Package
-
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>
}- 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");
}