How to check image size before uploading on server
How to check image size before uploading on server:
How to check image size in Asp.net Programming is very important Question in web development,
many time we seen that some web site give the restriction for the uploading
image .for this here we give some code for the web developer that they make
this type of application easily.
In Asp.net we use this code as like we give here. if you
want this type of program the simple copy this and past in aspx page here no
need to the aspx.cs code this work by the java script Programming.
Click on Choose file button and click on the button:
Code of Asp.net Page :
<html>
<head runat="server">
<title></title>
<style type='text/css'>
body
{
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function loadImage() {
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
//input = document.getElementById('imgfile');
input = document.getElementById('<%=fuFile.ClientID%>');
if (!input) {
write("Um, couldn't find the imgfile element.");
}
else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = document.createElement('img');
img.onload = imageLoaded;
img.style.display = 'none'; // If you don't want it showing
img.src = fr.result;
document.body.appendChild(img);
}
function imageLoaded() {
write(img.width + "x" + img.height);
// to do something with it!
img.parentNode.removeChild(img);
img = undefined;
}
function write(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
}
</script>
</head>
<body>
<form id="form1" runat="server" action='#' onsubmit="return false;">
<div>
<asp:FileUpload ID="fuFile" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="loadImage();" />
</div>
</form>
</body>
</html>
download code here by .Net Programming:
<head runat="server">
<title></title>
<style type='text/css'>
body
{
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function loadImage() {
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
//input = document.getElementById('imgfile');
input = document.getElementById('<%=fuFile.ClientID%>');
if (!input) {
write("Um, couldn't find the imgfile element.");
}
else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = document.createElement('img');
img.onload = imageLoaded;
img.style.display = 'none'; // If you don't want it showing
img.src = fr.result;
document.body.appendChild(img);
}
function imageLoaded() {
write(img.width + "x" + img.height);
write("The size of
file '" + file.name + "' is " + file.size + " bytes");
// This next bit removes the image, which is obviously optional -- perhaps you
want// to do something with it!
img.parentNode.removeChild(img);
img = undefined;
}
function write(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
}
</script>
</head>
<body>
<form id="form1" runat="server" action='#' onsubmit="return false;">
<div>
<asp:FileUpload ID="fuFile" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="loadImage();" />
</div>
</form>
</body>
</html>
