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:
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?
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.
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:
Reply With Quote
Originally Posted by Logic Ali
Bookmarks