www.webdeveloper.com
Results 1 to 4 of 4

Thread: Getting onChange to work with FF and IE

Hybrid View

  1. #1
    Join Date
    May 2009
    Posts
    8

    Getting onChange to work with FF and IE

    Hi all -

    Situation: I've developed a support page where users can drop in help tickets with javascript doing client side testing of the fields for missing data etc and php for server side handling and posting to an email address.
    There is also a section to add supporting images, videos etc of the bug/issue using the <input type="file" /> tag.

    Although I could have done server side file size checking, I didn't want my users to wait half an hour to up load a 10Mb video just to be told it was too large to send via email.

    So my client side solution was to have a function fire when a file is selected:

    Code:
    <input type="file" id="attachment1" name="attachment[]" onchange="findSize(1)" />
    The id is name 1 because I have javascript to allow the user to add multiple "Select a file" boxes, dynamically adding 1 to the id number each time. The name is an array for the server side handler of the multiple files (if any). The onchange you see fires "findSize(attachmentRef)".

    Code:
    function findSize(id) {
    	var maxFileSize = 5242880; //5mb in bytes
    	
    	var idNumber = id;
    	var fileInput = $("#attachment"+idNumber)[0];
    	if(fileInput.files[0].fileSize > maxFileSize) {
    		//this file is greater than 5mb - warn the user
    		alert("This file exceeds the 5Mb limit - please click Choose File and reselect or compress the file.");
    		//set the alert flag so that the user cannot accidentally still upload a large file
    		document.forms["send"].elements["attachmentsGoodToGo"].
    value = 0;
    	}
    	else {
    		document.forms["send"].elements["attachmentsGoodToGo"].
    value = 1;
    	}
    }
    This is the findSize function that feeds back to the user instantly if the file is too big for processing - saving headaches all round. I use some jQuery to work out which file input we are looking at and to test the size of the file. If the file is too big, an alert flag is written into the form to prevent the user from hitting submit (one of my client side test conditions for checking the form confirms that this flag is 1 not 0).

    Issue: The code works fine on my test browser - Chrome. But in my next step test (FF 7.0.1 and IE9) nothing happens. I can locate and add a file for upload, but the onchange doesn't fire. Or is it something in my function that is causing the bug? I'm using jQuery 1.4.4 for your info.

    Solution: I've seen many examples of how to implement onchange with different browsers - something about IE and FF differing in what they mean by a change and when it happens; but I admit I'm a bit lost. Can any one spell out a solution ABC fashion?

    cheers

    frank

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    It would be friendlier to use the enclosing form's onsubmit handler instead, but are you sure those properties are available in I.E. via JQuery?
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    May 2009
    Posts
    8
    Quote Originally Posted by Logic Ali View Post
    It would be friendlier to use the enclosing form's onsubmit handler instead, but are you sure those properties are available in I.E. via JQuery?
    Hmm not sure am a jquery noobie. That was one solution I had thought of to cycle around the attachments when you submit to check if any are too big if this is what you mean; I just wanted a more user friendly instant update when you select a file, say rather than after selecting 10 files and finding 5 are too big.

    cheers

    frank

  4. #4
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by bradfrankshaw View Post
    Hmm not sure am a jquery noobie. That was one solution I had thought of to cycle around the attachments when you submit to check if any are too big if this is what you mean; I just wanted a more user friendly instant update when you select a file, say rather than after selecting 10 files and finding 5 are too big.

    cheers

    frank
    I.E. does support onchange for this element type and it fires when you click the 'Open' button. Do you get any console errors?

    This works for Firefox, Opera, Chrome & Safari. On I.E. it just aborts:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Page</title>
    </head>
    <body>
    <form>
     <input type=file onchange='attachmentsGoodToGo.value = findSize( this, 5242880 )'><br>
     <input name='attachmentsGoodToGo' value='1'> <!-- Presumably hidden -->
    </form> 
    
    <script type='text/javascript'>
    
    function findSize( fileInput, maxFileSize ) 
    {
    	var exceeded = false, bytes;
    	
    	if( fileInput.files && ( bytes = fileInput.files[0].size ) > maxFileSize) 
    	{
    		exceeded = true;
    		alert("At " + bytes + " bytes, this file exceeds the stated size limit of " + maxFileSize + "\n\nPlease re-select or compress the file.");
    	}
    	
    	return exceeded ? 0 : 1;
    }
    
    </script>
    
    </body>
    </html>
    Last edited by Logic Ali; 11-02-2011 at 01:36 PM.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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