Upload Image MVC .net ,JS ,SetPreview Code, And Show Image
================
Index
================
<div>
<img id="user_img" height="100" width="90" style="border:solid" />
</div>
<input type="file" id="portrait-image1" onchange="show(this)" />
<button type="button" onclick="uploadContentsTest()">upload test</button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.4/dist/sweetalert2.all.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript">
function show(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
$('#user_img').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
<script>
function setImagePreview(targetId, inputId, minWidth, minHeight, maxSize) {
var input = document.getElementById(inputId);
if (input.files.length === 0) return; //user cancel
if (input.files[0].size > maxSize * 1024 * 1024) {
input.value = '';
Swal.fire({
title: 'Content Upload',
text: 'Please upload a smaller file (less than 10MB)',
icon: 'info'
});
document.getElementById(inputId).value = null;
return;
}
img = new Image();
var objectUrl = URL.createObjectURL(input.files[0]);
img.onload = function () {
if (minWidth < minHeight && this.width > this.height) {
Swal.fire({
title: 'Content Upload',
text: `Please choose an image file with aspect ratio of 9:16 (portrait/tall image)`,
icon: 'info'
});
document.getElementById(inputId).value = null;
return;
}
if (minWidth > minHeight && this.width < this.height) {
Swal.fire({
title: 'Content Upload',
text: `Please choose an image file with aspect ratio of 9:16 (portrait/tall image)`,
icon: 'info'
});
document.getElementById(inputId).value = null;
return;
}
if (this.width < minWidth || this.height < minHeight) {
Swal.fire({
title: 'Content Upload',
text: `Please choose an image file with a minimum resolution of ${minWidth}x${minHeight} `,
icon: 'info'
});
document.getElementById(inputId).value = null;
return;
}
//_URL.revokeObjectURL(objectUrl);
var target = document.getElementById(targetId);
//target.src = URL.createObjectURL(input.files[0])
target.onload = function () {
URL.revokeObjectURL(objectUrl)
}
target.src = objectUrl;
//target.parentNode.classList.add("remove-image");
};
img.src = objectUrl;
}
</script>
<script>
function uploadContentsTest() {
var url = '/Home/uploadContent';
var data = new FormData();
var files = $("#portrait-image1").get(0).files;
if (files.length > 0) {
data.append("HelpSectionImages", files[0]);
}
$.ajax({
type: 'POST',
url: url,
data: data,
cache: false,
contentType: false,
processData: false,
success: function (response) {
if (response.status === 0) {
let contentType = $('#content-type').val();
let eventId = $('#event-id').val();
if (contentType == "showcase" && eventId > 0) {
Swal.fire({
title: 'This Is Title',
text: "This is Text",
icon: "success"
}).then((result) => {
location.href = `/upload-content/${eventId}`;
});
return;
}
Swal.fire({
title: 'This Is Titile',
text: "Your content has been uploaded. You will receive a notification email when it's approved.",
icon: "success"
}).then(() => {
location.href = '@Url.Action("MyProfile", "Account")';
})
return;
}
Swal.fire({
title: 'This Is Title',
text: 'This Is Text',
icon: 'error'
});
},
error: function (response) {
Swal.fire({
title: 'This Is Title',
text: 'This Is Text',
icon: 'error'
});
}
});
}
</script>
<div class="card-uploaded">
<div class="card_desc">
<div class="card_teks">
<h4>Testing</h4>
<p>testing upload</p>
</div>
<div class="btn-upload-img">
<label for="portrait-image1">
upload
</label>
</div>
</div>
<div class="img-preview">
<span class="remove-img">x</span>
<img src="" id="thumb-preview1">
</div>
</div>
<div class="hidden">
<form id="upload-form" method="post" enctype="multipart/form-data" action="/Participant/UploadContent">
<input id="landscape-image" name="landscape-image" type="file" accept="image/*" onchange="setImagePreview('banner-preview', 'landscape-image', 1280, 720, 3);" />
<input id="portrait-image1" name="portrait-image1" type="file" accept="image/*" onchange="setImagePreview('thumb-preview1', 'portrait-image1', 720, 1280, 3);" />
</form>
</div>
===================
HomeController
===================
public ActionResult uploadContent()
{
var pic = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"];
var ext = Path.GetExtension(pic.FileName);
var allowedExtensions = new[] {
".Jpg", ".png", ".jpg", "jpeg"
};
if (allowedExtensions.Contains(ext))
{
if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
{
var path = Path.Combine(Server.MapPath("~/Img"), pic.FileName);
pic.SaveAs(path);
}
}
return View();
}
.png)
Tidak ada komentar