How to get image size of a form field (formData) in Javascript

Question

Any idea how to get size in bytes of an image within a validating javascript function so that user will be prompted to pick a valid image size. I have seen other answers which handle this out of the form logic, but I want to know if I can get the size within the validation javascript function. Thanks

Here is my Form related code:

<form action="index.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm(this)">
    <script>
        function validateForm(form) {
            var image_name = form.image.value;
            if (image_name == null || image_name == "") {
                alert('Select an image');
                return false;
            } else return true;
        }
    </script>
    <label> Image (300 KB max.) <input type="file" name="image" /> </label>
    <input type="submit" value="Submit" name="submit" />
</form>

BTW, "size of an image" is ambiguous - I assume from the code you mean the number of bytes not the height/width pixels? — John Carter, May 24 '13 at 21:48

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

HTML5 File API supports file size check. http://www.html5rocks.com/en/tutorials/file/dndfiles/

    <input type="file" id="image" />

    var size = document.getElementById("image").files[0].size;

or  
     var size = document.getElementsByName("image")[0].files[0].size; // edit added

But its a better idea to put a server side validation for file size too.

Note : this won't work on older browsers

Also check this question :
Detecting file upload size on the client side? and
Stopping the upload process if the upload limit I chose is exceeded

Fiddle http://jsfiddle.net/wKvf8/

edited May 23 '17 at 12:05

Community

1
1

answered May 24 '13 at 21:45

Amitd

4,769
8
56
82

When I put the above line "var size = document.getElementById("image").files[0].size;", The validation function stop working. Not sure if there is some syntax error. I am using IE 9. – user2026794 May 24 '13 at 22:12
As soon as I use id="image" instead of name="image" other places in the program where I refer to image get error: if (move_uploaded_file($_FILES['image']['tmp_name'],'images/'.$_FILES['image']['name'])) { print '
The file has been successfully uploaded
'; $fileup="true"; } – user2026794 May 24 '13 at 22:27
@user2026794 Use both name and id for the element then. – Ray Nicholus May 24 '13 at 23:07
@user2026794 you can also use `document.getElementsByName("image")[0].files[0].size` .. i have made an edit to the answer – Amitd May 25 '13 at 01:49
After using document.getElementsByName("image")[0].files[0].size; I am not getting the error but somehow control exits from the Javascript validation function without executing anything. When I comment out this line, the function works fine. I think we are very close but there may be some error in the statement or something. – user2026794 May 26 '13 at 04:58
same problem if I user "var file = document.getElementByID('image').files[0];" script just exits from this line and doesn't execute lines after that. – user2026794 May 26 '13 at 06:15
I have added a fiddle example http://jsfiddle.net/wKvf8/ ..seems to work.. check the javascript console in your browser for any errors.. Press F12 to bring the debug bar – Amitd May 26 '13 at 14:13
1

Thank you very much for doing this, but somehow your code still does not display any results upon running in jsfiddle. Maybe something to do with my browser. Anyway, I have found a way which is working and I am posting it so that it will help someone. – user2026794 May 26 '13 at 17:02
nice.. great to see you found and shared the answer – Amitd May 26 '13 at 17:08
Just tried your code (jsfiddle) in Fire fox and it worked. Not sure why it won't in IE9. In IE f12 is showing following error: SCRIPT5007: Unable to get value of the property '0': object is null or undefined _display, line 22 character 5 – user2026794 May 26 '13 at 18:40
Seems IE9 doesnt support File API http://stackoverflow.com/questions/4349144/will-ie9-support-the-html5-file-api – Amitd May 27 '13 at 04:18

score 1 · Accepted Answer · answered May 26 '13 at 17:06

 <?php
  if(isset($_POST['submit'])) {
     $first_name=$_POST['fname'];
    echo 'Entered First Name = '.$first_name;
 }
 ?>
 <html>

 <form method="post" enctype="multipart/form-data" action="">
     <label for="fname"> First Name: </label> <input  type="text" name="fname"  /> <br /><br />
     <label for="file"> Select File: </label> <input  type="file" id="file" />
     <input type="submit" name="submit" value="Submit" />
 </form>

 <script>
 document.forms[0].addEventListener('submit', function( evt ) {
     var file = document.getElementById('file').files[0];

     if(file && file.size < 18000) { 
         //Submit form
        alert('Size is valid');
     } else {
        alert('pic too big');
        evt.preventDefault();
     }
 }, false);
 </script>
 </html>

How to get image size of a form field (formData) in Javascript

2 Answers2