const dropArea = document.querySelector(".drag-area"),
dragText = dropArea.querySelector("header"),
button = dropArea.querySelector("button"),
input = dropArea.querySelector("input");
button.onclick = () => {
input.click();
}
input.addEventListener("change", function () {
files = this.files[0];
dropArea.classList.add("active");
});
var myVideos = [];
window.URL = window.URL || window.webkitURL;
document.getElementById('fileUp').onchange = setFileInfo;
function setFileInfo() {
let fileType = files.type;
let validExtensions = ["video/mp4"];
if (validExtensions.includes(fileType)) {
files = this.files;
myVideos.push(files[0]);
var video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = function () {
window.URL.revokeObjectURL(video.src);
var duration = video.duration;
myVideos[myVideos.length - 1].duration = duration;
updateInfos();
}
video.src = URL.createObjectURL(files[0]);;
function updateInfos() {
var infos = document.getElementById('infos');
infos.textContent = "";
for (var i = 0; i < myVideos.length; i++) {
infos.textContent = myVideos[i].duration + '\n';
document.getElementById('Label1').textContent = myVideos[i].duration;
}
}
}
else {
alert("This is not an Image File!");
dropArea.classList.remove("active");
dragText.textContent = "Drag & Drop to Upload File";
}
}
<form id="form1" runat="server">
<span id="Message" runat="server"></span>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label" ViewStateMode="Enabled"></asp:Label>
</form>
<div> <div class="drag-area">
<div id="input-upload-file" class="box-shadow">
<input type="file" class="upload" id="fileUp" name="fileUpload" accept="video/mp4" hidden />
<button>Browse File</button>
<pre id="infos" runat="server"></pre>
</div>
</div>
</div>
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("<script language=javascript>alert('" + Label1.Text + "');</script>");
}
sonuc
