Validating file extensions from an array
<p>I have searched the Web and SO to figure this one out by myself with many different ways, but with no success.</p>

<p>I would like to show a message if the file extension is accepted or not, in the same fashion as the "outpush.push" statements.</p>

<p>This would need to be taken from an ARRAY of accepted file extensions such as JPG, PNG, GIF and detect if the file extension is uppercase and accept it (convert it to lowercase).</p>

<p>Here is my script. Am wondering how and where in the script could I implement such a feature?</p>

<pre><code>function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object
    var max_size = 5120; // Max file size

    var output = [];
    for (var i = 0, f; f = files[i]; i++) {

        output.push('&lt;li&gt;&lt;strong&gt;&lt;font size="3" color="FFFFFF"&gt;FILE: ', escape(f.name), '&lt;/strong&gt; (', f.type || 'n/a', ') - ',
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '&lt;/font&gt;&lt;/li&gt;');

        if(f.size &gt; max_size) {

            output.push('&lt;font size="5" color="FFFF00"&gt;&lt;b&gt;ERROR!! Sorry, but the file that you selected is too large. Please upload a file that is no larger than ' + max_size + ' KB.');
        }

        if(f.size &lt; max_size) {
            output.push('&lt;font size="5" color="FFFF00"&gt;&lt;b&gt;FILE SIZE OK. CLICK TO SEND button below.&lt;/font&gt;');

            output.push('&lt;font size="5" color="FFFFFF"&gt;&lt;hr&gt;&lt;b&gt;IMPORTANT: Do not close this window. Wait till you see the next page when finished uploading your file.&lt;/font&gt;');

            document.getElementById("myButton").style.display="all";
        }

    }

    document.getElementById('list').innerHTML = '&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</code></pre>
