javascript - 验证数组中的文件扩展名

我已经搜索了Web和SO，以自己的方式通过多种方法解决了这个问题，但没有成功。

我想以“outpush.push”语句的相同方式显示是否接受文件扩展名的消息。

这需要从接受的文件扩展名(例如JPG，PNG，GIF)的数组中获取，并检测文件扩展名是否为大写并接受(将其转换为小写)。

这是我的剧本。想知道如何在脚本中以及在哪里实现这种功能？

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);

最佳答案

您的代码有几个问题。

1)您应该使用if-else，而不是多个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/

关于javascript - 验证数组中的文件扩展名，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15165111/