Using javascript check uploaded file size in PHP

<script language="javascript" type="text/javascript">
function aditya(source, args)
{
//alert('hi');
arguments.isvalid = false;
fileupload = document.getElementById('file1');
file=fileupload.files[0];
if (file.size<1048576)
{
args.IsValid = true;
return true;
}
else
{
alert("file size is greater than 1048576 ");
args.IsValid = false ;
return false;
}

}
</script>
<form name="upload" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file1">
<input type="submit" name="Submit" value="Upload" onclick="return aditya();">
</form>

Java Script Events and there Descriptions

Event	Description	Applicable on Controls
onAbort	When user cancel image loading	Image
onBlur	When control lost its Focus	Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window
onChange	Combo index change/Textbox data change	Text, TextArea, Select
onClick	Most useful event. Occur when user click on a button	Button, Checkbox, Link, Radio, Submit
onDblClick	When user double click on a Link	Link
onFocus	When an object get focus	Button, Checkbox, Radio, Reset, Select, Submit, Text, TextArea
onKeyDown	When the key is down means pressing time	Link, TextArea
onKeyPress	When user presses/holds a key	Link, TextArea
onKeyUp	When user release a key	Link, TextArea
onLoad	After completion of loading a page	Window, Image
onMouseDown	When mouse presses	Link, Button, Document
onMouseMove	When user moves the mouse	Link, Button, Document
onMouseOut	When user moves the mouse away from a object	Image, Link
onMouseOver	When user moves the mouse over a object	Image, Link
onMouseUp	When user release mouse	Document, Button, Link
onMove	When user moves the browser window or a frame	Document, Button, Link
onReset	By clicking on reset Button	Form
onResize	When user resizes the browser window or a frame	Window
onSelect	When user select text	Text, TextArea
onSubmit	When user clicks the submit button	Form
onUnload	When user leaves the page/close the browser	Window

Example onClick Event:


function clck()
{
// Code goes here
alert("Click event fired");
// Return false never make a post back to server.
// so one can add validation by using this concept. If return true then the page will be post back to server
return false;
}

Add the handler:

<asp:button runat="server" id="cmdOnClick" text="OnClientClick" onclientclick="return clck();">
<asp:button runat="server" id="cmdOnClick" text="OnClientClick" onclientclick="return clck();">
<input type="button" name="cmdHTML" value="HTML onClick" onclick="return clck();">

Using javascript check uploaded file size for (Internet Explorer)

Note:- Only working with Internet explorer
for FireFox,Crome,Safari,Opera check this page

code is given below:

<html>

<head>
<script>
function getSize()
{
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="btn" value="Size?" onClick="getSize();">
</form>
</body>
</html>

Image Uploading validation using Javascript

JavaScript Function Code:- 

<script language="javascript" type="text/javascript">
            function validate() {
                var result = false;
                var upfile = document.getElementById("FileUpload1").value;
                if (upfile != "") {
                    var accept = "png,gif,jpg,jpeg,PNG,GIF,JPG,JPEG".split(',');
                    var getExtention = upfile.split('.');
                    var extention = getExtention[getExtention.length - 1];
                    for (i = 0; i < accept.length; i++) {
                        if (accept[i] == extention) {
                            result = true;
                            break;
                        }
                    }
                    if (!result) {
                        alert("allowed file extetions are png,gif,jpg,jpeg");
                    }

                }
                else {
                    alert("select image to Upload");
                }
                return result;
            }
        </script>


write this javascript function then use this function as given below code in your button or any other control as per use.

<INPUT TYPE=FILE NAME="FileUpload1"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit" onClick="return validate();">    

<asp:Button ID="btnUploadImage" runat="server" Text="Upload Image" 
            OnClientClick="return validate();" onclick="btnUploadImage_Click"  />

Numeric key validation using JavaScript

we can check entered keyis numeric or not using javascript coding in our web page.

check example given below:-

Only Numeric key can be Entered :

html code for this:-

 <html>
<head>
<script type = "text/javascript">
    function isNumeric(keyCode)
    {    
        if (keyCode!=8) //if the key is the backspace key
         {
        if ((keyCode<48||keyCode>57) && (keyCode<96||keyCode>105))          return  false;    
    else
            return true;   
    } 
    }
    </script>
</head>
<body>
Only Numeric key Entered In text Box :
<input type="text" id="txtBox1" onkeydown = "return isNumeric(event.keyCode);"/>
</body>
</html>

Note:
          ASCII code for integers 0-9 is 48-57.
          ASCII code for extra numeric key pad's integers 0-9 is 96-105.

showing classical clock using JavaScript in html/asp.net

classical clock using JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

 code :- 

<html >
<head>
<script type="text/javascript">

var H='....';

var H=H.split('');

var M='.....';

var M=M.split('');

var S='......';

var S=S.split('');

var Ypos=0;

var Xpos=0;

var Ybase=8;

var Xbase=8;

var dots=12;



function clock(){

var time=new Date ();

var secs=time.getSeconds();

var sec=-1.57 + Math.PI * secs/30;

var mins=time.getMinutes();

var min=-1.57 + Math.PI * mins/30;

var hr=time.getHours();

var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;

for (i=0; i < dots; ++i){

document.getElementById("dig" + (i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString() + "px";

document.getElementById("dig" + (i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString() + "px";

}

for (i=0; i < S.length; i++){

document.getElementById("sec" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(sec).toString() + "px";

document.getElementById("sec" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(sec).toString() + "px";

}

for (i=0; i < M.length; i++){

document.getElementById("min" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(min).toString() + "px";

document.getElementById("min" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString() + "px";

}

for (i=0; i < H.length; i++){

document.getElementById("hour" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(hrs).toString() + "px";

document.getElementById("hour" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString() + "px";

} 

setTimeout('clock()',50);

}
</script>
<style type="text/css">

div.dig, div.hour, div.min, div.sec

{

position:absolute;

}

div.hour, div.min, div.sec

{

width:2px;

height:2px;

font-size:2px;

}

div.dig

{

width:30px;

height:30px;

font-family:arial,verdana,sans-serif;

font-size:10px;

color:#000000;

text-align:center;

padding-top:10px

}

div.min

{

background:#0000FF;

}

div.hour

{

background:#000000;

}

div.sec

{

background:#FF0000;

}

</style>
</head>
<body >
    <form name="form1" >
    
    <div style="width:120px;height:100px;position:relative;left:58px;top:50px;" >

 <div id="dig1" class="dig">1</div>

 <div id="dig2" class="dig">2</div>

 <div id="dig3" class="dig">3</div>

 <div id="dig4" class="dig">4</div>

 <div id="dig5" class="dig">5</div>

 <div id="dig6" class="dig">6</div>

 <div id="dig7" class="dig">7</div>

 <div id="dig8" class="dig">8</div>

 <div id="dig9" class="dig">9</div>

 <div id="dig10" class="dig">10</div>

 <div id="dig11" class="dig">11</div>

 <div id="dig12" class="dig">12</div>
 
  <div id="hour1" class="hour"></div>

 <div id="hour2" class="hour"></div>

 <div id="hour3" class="hour"></div>

 <div id="hour4" class="hour"></div>

 <div id="min1" class="min"></div>

 <div id="min2" class="min"></div>

 <div id="min3" class="min"></div>

 <div id="min4" class="min"></div>

 <div id="min5" class="min"></div>

 <div id="sec1" class="sec"></div>

 <div id="sec2" class="sec"></div>

 <div id="sec3" class="sec"></div>

 <div id="sec4" class="sec"></div>

 <div id="sec5" class="sec"></div>

 <div id="sec6" class="sec"></div>

</div>
<input type="button" value="click to run "   onclick="clock()"/>

    
    </form>
</body>
</html>

digital clock using javascript

we can create digital clock using javascript using given code


example:-

Digital Clock By Critical Codes

hour : minute : sec :

code:-

<html>
<head>
</head>
<body>
<script language="javascript">
function func()
{
mydate=new Date();
h=mydate.getHours();
m=mydate.getMinutes();
s=mydate.getSeconds();
document.f.h.value=h;
document.f.m.value=m;
document.f.s.value=s;
}
window.setInterval("func()",1000)
</script>
<h3 align="center">Digital Clock By Critical Codes</h3>
<br><br>
<center>
<form name="f"> <font color="green">
hour : <input type="text" name="h" size="2">
minute : <input type="text" name="m" size="2">
sec : <input type="text" name="s" size="2"></font>
</form>
</center>
</body>
</html>

Visible,Show,Hidden,Hide Controls using JavaScript ASP.NET

when we want to use this functionality we have to find control id in Javascript

step 1    for find control id --------

var e = document.getElementById('rw1');

step 2 then we use control_id.style property for this-------

for visibility of control

e.removeAttribute("style");

we can use e.style.display='block'; in place of  e.removeAttribute("style");
but can disturb structure of page.
so we should use e.removeAttribute("style"); 

for hide  control

g.style.display='none';



 Example:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
     <script language="javascript" type="text/javascript">
   
     function toggle_v(me) {
      var e = document.getElementById('rw1');
      var f = document.getElementById('rw2');
      var g = document.getElementById('rw3');
      if(me.value=='4K')
      {
      e.removeAttribute("style");//e.style.display='block';
      f.style.display='none';
      g.style.display='none';
      }
      else if (me.value=='4J')
      {
      e.removeAttribute("style");
      f.removeAttribute("style");
      g.style.display='none';
      }
      else if(me.value=='4M')
      {
      e.style.display='none';
      f.style.display='none';
      g.removeAttribute("style");
      }
      else
      {
      e.style.display='none';
      f.style.display='none';
      g.style.display='none';
      }
       
   }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <b>PG Officer Action </b>
                </td>
                <td >
                    <asp:DropDownList ID="select" runat="server" onchange="toggle_v(this);">
                        <asp:ListItem Text="-- PLEASE SELECT --" Value="XX" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Aditya Pratap Singh" Value="4K"></asp:ListItem>
                        <asp:ListItem Text="Akhilesh Gupta" Value="4J"></asp:ListItem>
                        <asp:ListItem Text="Abhishek Kumar Rai" Value="4M"></asp:ListItem>
                     </asp:DropDownList>
                </td>
            </tr>
          
            <tr id="rw1" style="display: none">
                <td>
                    <b>Address </b>
                </td>
                <td>
                    <asp:TextBox ID="TxtLetterContNTS" runat="server" BorderStyle="Solid" BorderWidth="1px"
                      TextMode="MultiLine" height="200px" Width="350px"   ></asp:TextBox>
                </td>
            </tr>
            <tr id="rw2" style="display: none">
                <td>
                    <b>Do you want to send Address ? </b>
                </td>
                <td style="margin-left: 20px;">
                    <asp:RadioButtonList ID="rdb" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Selected="True" Text="Yes" Value="Y"></asp:ListItem>
                        <asp:ListItem Text="No" Value="N"></asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr id="rw3" style="display: none">
                <td>
                    <b>Remarks </b>
                </td>
                <td style="margin-left: 20px;">
                    <asp:TextBox ID="txtremarks" runat="server" BorderStyle="Solid" BorderWidth="1px"
                      TextMode="MultiLine" height="200px" Width="350px"></asp:TextBox>
                </td>
            </tr>
         
        </table>
    </div>
    </form>
</body>
</html>