Upload Image HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload Image</title>
<link rel="stylesheet" href="https://myshowtime.world/css/v1.5/style.css?version=2.5.6" />
</head>
<style>
img#thumb-preview1 {
height: 100px;
float:right;
}
.card-uploaded {
height: 200px;
}
</style>
<body>
<section id="wider">
<div class="container">
<div class="title-page_wrap no-border">
<h2 class="title-page" >Upload Image</h2>
</div>
<div class="showcase-desc">
<p>In order to participate in an event, you must have at least one non-event image showcase</p>
</div>
<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>
<button type="button" onclick="uploadContentsTest()">upload test</button>
</div>
</section>
<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>
<!-- Alert For Notify-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.4/dist/sweetalert2.all.js"></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;
}
function uploadContentsTest() {
var url = '/participant/uploadContent';
var data = new FormData();
data.append('category', '0');
data.append('tags', '');
//data.append('portrait', document.querySelector('#portrait-image').files[0])
data.append('portrait', document.querySelector('#portrait-image1').files[0])
data.append('landscape', document.querySelector('#landscape-image').files[0])
var title = $("#content-title").val();
data.append('title', title);
let eventId = $('#event-id').val();
let contentType = $('#content-type').val();
if (contentType == "showcase") {
data.append('event_id', 0);
} else {
data.append('event_id', eventId);
}
if (document.getElementById('video-content').files.length === 1) {
data.append('video', document.querySelector('#video-content').files[0])
}
for (i = 0; i < fileList.length; i++) {
if (fileList[i] == undefined) continue;
data.append('premium_' + i, fileList[i]);
}
$.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>
</body>
</html>
.png)
Tidak ada komentar