How to get my html5 feature incompatibility warning to work using javascript

Question

I've added a form to my webpage which allows for multiple file uploads. I added the input <input type="file" name="photo_upload[]" id="photo_upload" multiple="multiple" />.

I've tried to add a warning which is only visible if the browser does not support the multiple file feature. I tried this code:

<script type="text/javascript">
var testrange=document.createElement("input")
testrange.setAttribute("multiple", "multiple")
if (testrange.multiple=="multiple"){
    document.getElementById('multiple_warning').style.display = 'none';
}
</script>
<div id="multiple_warning" style="background:#FFFF99; border:dashed; border-width:thin;">Sorry, but your browser does not support the multiple file upload feature.<br />
If you have more than one photo to send us, please send it after you recieved your comformation email.</div>

but it always displays the "multiple_warning" regardless. How can I get this to behave properly?

You can use the MODERNIZR Library like in this [example](http://stackoverflow.com/questions/8010122/modernizr-just-for-one-quick-check) — SpecialHias, Jul 10 '12 at 06:04

score 1 · Answer 1 · answered Jul 10 '12 at 06:05

You could use Modernizr to test for particular attribute. Its an open source, cross browser html 5 detection library

if(Modernizr.input[attribute])){
    alert("Attribute exists");
}
else{
    //error handling
}

See here http://modernizr.com/docs/#input

score 0 · Accepted Answer · answered Jul 10 '12 at 06:02

Check the console to see why your test always failes ;)

testrange.setAttribute("multiple", "multiple")
console.log(testrange.multiple);

You could check this feature with this snippet

if (!("multiple" in testrange)) {
    alert("no multiple upload supported");
}

score 0 · Answer 3 · answered Jul 10 '12 at 06:07

Use this instead of the JavaScript you have:

var testrange = document.createElement("input")
if ("multiple" in testrange) {
    document.getElementById("multiple_warning").style.display = "none";
}

If you're doing a lot of feature detection, consider using Modernizr to test these sorts of things rather than creating your own tests. It accounts for a lot of corner cases and will save you a lot of headaches.

How to get my html5 feature incompatibility warning to work using javascript

3 Answers3