Question

In an <input type="file" > element ,I am selecting a file of extension .srt and determining the type of the file using javascript.I tried this

var file=document.getElementById('fselect').files[0];
success = file.type =='application/x-subrip'? true : false;
console.log('selected a  file of type='+file.type);
console.log('selected a subtitle file='+success);

However,I get the expected results only in chrome 18.0.1025.168

selected a  file of type= application/x-subrip
selected a subtitle file= true

But in firefox 12 with firebug installed,I get

selected a  file of type= 
selected a subtitle file= false

I am confused by this..how can I consistently determine the type of file in both browsers?

Answer 1

You can use HTML5’s File API. It is currently supported in every single modern browser including IE 9.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

function handleFileSelect(evt) {
    var files = evt.target.files;                  // file list
    for (var i = 0, f; f = files[i]; i++) {
        if(f.type){
            console.log(f.type); 
        }else{
            var match = f.name.match(/^.+(\.[^\.]+)$/);
            if(match) {
                console.log(match[1]);
            }else{
                console.log('no MIME type nor extension');
            } 
        }
    }
}

document
    .getElementById('files')
    .addEventListener('change', handleFileSelect, false);

　

<input type="file" id="files">

LIVE DEMO: http://jsfiddle.net/DerekL/f2WmJ/

It should be the same across the browsers because it is a standard.