www.webdeveloper.com
Results 1 to 13 of 13

Thread: upload file size+javascript

  1. #1
    Join Date
    Mar 2004
    Posts
    1

    upload file size+javascript

    Dear All,

    how can i find the size of a file when it is uploading using javascript,

    fileupload.php
    ----------------



    <form name=frmupload enctype="multipart/form-data" onSubmit="return validate()" action="upload.php">

    <input type=file name=userfile>

    <input type=submit name=submit value=submit>
    </form>


    <script language=javascript>

    function validate()
    {


    if the size of the userfile is greater than 200 kb this function should be return false else it should return true


    }




    </script>


    regards
    bvsureshbabu

  2. #2
    Join Date
    Mar 2004
    Location
    ITALY
    Posts
    39
    i suppose javascript cannot accessing to file system...

    with javascript i think was impossibile...try using vbscript!

  3. #3
    Join Date
    Nov 2003
    Location
    Aachen, Germany
    Posts
    4,090
    Hi!

    For IE users you could do it with activeX in a javascript. But that would only make sense if you want to inform the user in advance, whether the file is too large or not.

    The final limitation of the file size should be set in your PHP script...

    Cheers - Pit

  4. #4
    Join Date
    May 2007
    Posts
    1

    Lightbulb Example client side javascript - image file size

    Hi,

    I have the following example to use client side javascript in finding an image file size before uploading...

    I've tested in Firefox v1.5 ( ) and Internet Explorer v6 ( ).

    Initially I did some searching and couldn't find a good solution overall, however I did find several ideas... putting them together and playing a little I came up with this sample script.
    Code:
    <html>
    	<head>
    		<title>Test Client side file size ~ .: rodboy :.</title>
    		<script type="text/javascript">
    			var binary;
    			var filename;
    			
    			function upload() {
    				var oThumbnail = document.getElementById("imgThumbnail");
    				filename = document.getElementById('myfile').value;
    				oThumbnail.src = "file:///" + escape(filename).replace(/%5C/gi,'/').replace(/%3A/gi,':');
    			
    				try {
    					/*
    						Note from the developer: rodboy
    						If mozilla or netscape based browser then the img fileSize property will not work,
    						therefore using the following will detect the file size.
    					*/
    					
    					netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    					// open the local file
    					var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
    					file.initWithPath( filename );
    					var stream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
    					stream.init(file,	0x01, 00004, null);
    					var bstream =  Components.classes["@mozilla.org/network/buffered-input-stream;1"].getService();
    					bstream.QueryInterface(Components.interfaces.nsIBufferedInputStream);
    					bstream.init(stream, 1000);
    					bstream.QueryInterface(Components.interfaces.nsIInputStream);
    					binary = Components.classes["@mozilla.org/binaryinputstream;1"].createInstance(Components.interfaces.nsIBinaryInputStream);
    					binary.setInputStream (stream);
    					/*
    						Note from the developer: rodboy
    						Display the file size of the image using the binary method.
    					*/
    					document.getElementById('sizespan').innerHTML = binary.available();
    					
    					binary = null;
    					bstream = null;
    					stream = null;
    					file = null;
    				} catch (e) {
    					/* 
    						Note from the developer: rodboy
    						Either browser is IE, in which case the img onload event will take effect, or
    						we'll not be able to detect the file size using the client side javascript.
    					*/
    				}
    				oThumbnail = null;
    			}
    			
    			function getSize(oImg)
    			{
    				if (oImg.fileSize >-1) {
    					document.getElementById('sizespan').innerHTML = oImg.fileSize;
    				}
    			}
    		
    		</script>
    	</head>
    	<body>
    		
    		<form>
    			File: <input id="myfile" name="datafile" type="file" size="40" onchange="upload();" /><br>
    			<input id="getsize" name="getsize" type="button" value="Just in case the size hasn't appeared, click here to get the Image Size" onclick="upload();" />
    		</form>
    		
    		<div id="sizespan"></div>
    		<div id="thumbnail">
    			<img id="imgThumbnail" name="imgThumbnail" src="" alt="place holder" width="50" height="50" onload="getSize(this);"/>
    		</div>
    		
    	</body>
    </html>
    What do you think?

    Ryan

  5. #5
    Join Date
    Jun 2008
    Posts
    1

    Image upload in client side

    I cannot upload image more than 900 KB(approx 1MB) with this method.
    what is the solution?
    by
    kalyan

  6. #6
    Join Date
    Aug 2007
    Posts
    3,767
    If you don't validate the size of upload on the server side it is very easy to bypass, and will be by accident when JavaScript is disabled.

  7. #7
    Join Date
    Jun 2009
    Posts
    2
    Hi,

    Executing the following statements resulted in javascript error messages on my setup.

    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);

    The error message that I got was:

    "netscape undefined"
    "components undefined"

    Have you included any files in your classpath that have definitions for netscape and Components?

  8. #8
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Those commands are only going to work on systems where the browser owner has enabled your ability to perform those tests - that will only be done on company intranets since those security options are turned off for web use.

    Even PHP on the server can only test the file size AFTER the file finishes uploading.

  9. #9
    Join Date
    Jun 2009
    Posts
    2
    All my attempts to upload a file using Javascript have failed. Even the simplest approach: <input type=file...> fails in javascript when I try to retrieve the file attributes using document.getelementbyid(..).file.files.item(0)

    Can you suggest any other way in which I can upload a file to a server? I have PHP running on the server.

  10. #10
    Join Date
    May 2010
    Posts
    2

    Thumbs up it dosent works in ie 8 and above versons or even in google crome

    it dosent works in ie 8 and above versons or even in google crome

  11. #11
    Join Date
    May 2010
    Posts
    2

    Thumbs up it dosent works in ie 8 and above versons or even in gooele crome

    really very good script but it dosent works with ie 8 + ver and not even in crome
    please advise some way out for the above browsers
    regards
    samkukki

  12. #12
    Join Date
    Jun 2012
    Posts
    1

    document.getElementById("myInput").files.item(0).size

    input type="file" has a files object attribute containing item():

    <input name="myFile" id="myFile" type="file">

    js:

    var fileSize = document.getElementById("myFile").files.item(0).size;

  13. #13
    Join Date
    Sep 2013
    Posts
    1

    resolved upload file valiadtion

    hi rodboy,

    Thanks a lot, your scripts works well for me in IE8.

    what can i do if i need to uplaod some more type of files like pdf, doc etc.

    can i upload those also with some modification in your script.

    Thanks again, let me know your views on my question.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles