Check file size with Javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • monki_sf
    New Member
    • Feb 2006
    • 3

    Check file size with Javascript

    Was wondering if anyone knew of way to validate an images file size using javascript - i.e keeping the upload to say 500k. I've seen scripts to validate the dimensions - but nothing for the actual file size.
  • Niheel
    Recognized Expert Moderator Top Contributor
    • Jul 2005
    • 2432

    #2
    I usually just upload it to the server to check the file size. I don't think JS has the capabilities, could lead to security mis-uses if JS could access filesystem.

    You could code something up if the all your user's allow ActiveX.
    niheel @ bytes

    Comment

    • monki_sf
      New Member
      • Feb 2006
      • 3

      #3
      Yeah - i'll be verifying on the backend using php - but seems strange that js can tell what a file type is - what the dimensions are - but not the file size.

      Comment

      • imranzubair
        New Member
        • Mar 2006
        • 1

        #4
        Hi
        IT will help you.
        [code=javascript]
        function A()
        {
        var oas = new ActiveXObject(" Scripting.FileS ystemObject");
        var d = document.a.b.va lue;
        var e = oas.getFile(d);
        var f = e.size;
        alert(f + " bytes");
        }

        </script>
        </head>
        <body>
        <form name="a">
        <input type="file" name="b">
        <input type="button" name="c" value="SIZE" onClick="A();">
        </form>
        </body>
        </html>
        [/code]
        Regards
        Imran
        Last edited by Frinavale; Jan 19 '09, 03:31 PM. Reason: added code tags

        Comment

        • monki_sf
          New Member
          • Feb 2006
          • 3

          #5
          Originally posted by imranzubair
          function A()
          {
          var oas = new ActiveXObject(" Scripting.FileS ystemObject");
          var d = document.a.b.va lue;
          var e = oas.getFile(d);
          var f = e.size;
          alert(f + " bytes");
          }

          </script>
          </head>
          <body>
          <form name="a">
          <input type="file" name="b">
          <input type="button" name="c" value="SIZE" onClick="A();">
          </form>
          </body>
          </html>
          Thanks Imran - so applying this to my forms validation should look like this right?

          Code:
          <script language=javascript>
          extArray = new Array(".jpg", ".jpeg",".gif");  //".png", , ".gif"
          
          function callCancel()
          {
          	document.frmlisting.action="listing_list.php?cityid=<?=$cityid?>&c_id=<?=$c_id?>";
          	document.frmlisting.submit();
          }
          
          function callSave()
          {
          var oas = new ActiveXObject("Scripting.FileSystemObject");
          var d = document.frmlisting.txtlistingimage.value;
          var e = oas.getFile(d);
          var f = e.size;
          alert(f + "500000");
          }
          {
              if(!isCurrency(document.frmlisting.txtlistingprice.value)){
                  alert("Price: Incorrect data");
                  document.frmlisting.txtlistingprice.select();
          		return;
              }
          	if(isBlank(document.frmlisting.txtlistingtitle.value)){
              	alert("Title is Required");
                  document.frmlisting.txtlistingtitle.focus();
              	return;
              }
          	if(!isBlank(document.frmlisting.txtlistingimage.value)){
          	    if(!isValidFile(document.frmlisting.txtlistingimage.value)){
          	        alert("Selected file is not a vaild image type. \nPlease select "+ (extArray.join("  ").toUpperCase())+ " files. ");
          	        document.frmlisting.txtlistingimage.select();
          	        return;
          	    }
              }
          	if(isBlank(document.frmlisting.txtlistingemail.value)){
                  alert("Email is Required");
                  document.frmlisting.txtlistingemail.select();
          		return;
          
              }
              if(!isEmail(document.frmlisting.txtlistingemail.value)){
                  alert("Email: Incorrect data");
                  document.frmlisting.txtlistingemail.select();
                  return;
              }
          
          	document.frmlisting.action="listingsubmit.php";
              document.frmlisting.submit();
          }
          </script>

          HTML
          Would be

          [HTML]<Input type="file" name="txtlistin gimage" style="WIDTH: 275px; HEIGHT: 20px" size=39 maxlength=100>

          <input type="button" class="btn_text " value="Preview" onclick="javasc ript:callSave() ;" style="border:s olid-1px; color: #333333 ">[/HTML]
          Last edited by monki_sf; Mar 12 '06, 10:34 PM.

          Comment

          • sashi
            Recognized Expert Top Contributor
            • Jun 2006
            • 1749

            #6
            hi there,

            am not sure if this code is useful.. give it a try.. good luck my fren..

            Comment

            • chiragpatel11
              New Member
              • Sep 2006
              • 1

              #7
              Hello friend i came here to find check file size script. but i got activeXerror in first script and so now i create following script. if this help take it and try it.
              1. this script load a image in Image Tag in Span Tag.
              2. It check the file size.
              3. if it is more than limit then remove image tag.
              [code=javascript]
              function imgLoad()
              {
              var strT = new String();
              document.getEle mentById("ShowI mg").innerHTM L= "";
              strT = document.ModReg .file1.value;
              if(strT != "")
              {
              strT = "<img id='Sample' src='" + strT + "' width='100' height='100'></img>";
              document.getEle mentById("ShowI mg").innerHTM L= strT;
              if(!LimitedSize ())
              {
              alert("File Size is more than 100 KB");
              document.getEle mentById("ShowI mg").innerHTM L= "";
              }
              }
              }

              function LimitedSize()
              {
              var i;
              var y = document.images ;
              for (i=0;i<y.length ;i++)
              {
              if((y[i].id) == 'Sample')
              {
              if(y[i].fileSize > 102400)
              return false;
              }
              }
              return true;
              }
              [/code]

              //--------------HTML
              [code=html]
              <INPUT
              name=file1 type=file id="file1" onChange="imgLo ad()" >[/code]
              Last edited by Frinavale; Jan 19 '09, 03:32 PM. Reason: added [code] tags

              Comment

              Working...