Geek asks and answers

Checking file extensions from an array

I searched the Internet and SO to understand this one of myself in different ways, but without success.

I would like to show a message if the file extension is accepted or not, the same as the instructions "outpush.push".

You need to do this from an array of accepted file extensions, such as JPG, PNG, GIF, and determine if the file extension is in upper case and accept it (convert it to lower case).

Here is my script. I wonder how and where in the script I could implement such a function?

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('<li><strong><font size="3" color="FFFFFF">FILE: ', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</font></li>');

        if(f.size > max_size) {

            output.push('<font size="5" color="FFFF00"><b>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 < max_size) {
            output.push('<font size="5" color="FFFF00"><b>FILE SIZE OK. CLICK TO SEND button below.</font>');

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

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

    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
+5
source share
3 answers

There are several problems in your code.

1) You should use if-elseinstead of several operators if:

if (f.size > max_size) {
    // ...
} else {
    // ...
}

2) all display, block inline:

document.getElementById("myButton").style.display = "block";

3) <font>. CSS. , msg, error, important ok.

4) , indexOf():

var extensions = ["jpg", "jpeg", "txt", "png"];  // Globally defined

...

// Get extension and make it lowercase
// This uses a regex replace to remove everything up to 
// and including the last dot
var extension = f.name.replace(/.*\./, '').toLowerCase();

if (extensions.indexOf(extension) < 0) {  // Wasn't found
    output.push('<li class="msg error">ERROR!! Sorry, but the file that you selected is not a valid file type.  Valid types are: ', valid, '</li>');
} else ...

: http://jsfiddle.net/jtbowden/L2Gps/

+7

- :

var file_types = {'jpg', 'png', 'gif'};

- for-loop

if ($.inArray(f.ext, file_types) == -1) {
output.push('<font size="5" color="FFFF00"><b>ERROR!! Incorrect file type! Accepted file types are : jpg, png, gif</b></font>');
}

inArray().

+2

- .

var accepted_types = ['jpg', 'gif', 'png'];
if (accepted_types.indexOf(f.ext) > 0) {
  output.push(...);
}

jQuery - HTML

var file_list = $("<ul></ul>");
for (var i = 0, f; f = files[i]; i++) {
  // work goes here, simply append the list elements into file_list
  file_list.append($("<li>" ... "</li>"));
}

// to append your new list to id="list"
$("#list").append(file_list);
// or to replace the html with your new html
$("#list").html(file_list.html());
0

More articles:


All Articles