2

我已经在网上搜索了很多不同的方法来自己解决这个问题，但没有成功。

如果文件扩展名被接受，我想以与“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);
4

3 回答 3

8

您的代码有几个问题。

1）您应该使用if-else, 而不是多个if语句：

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

2)不是、或all的有效值：displayblockinline

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

3）您正在使用过时的<font>标签。相反，使用样式和 CSS。在您的情况下，我会使用类，一个用于 a 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/

于 2013-03-01T22:00:13.077 回答
2

你可以有这样的数组：

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

然后在你的for循环中做这样的事情

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()的阅读。

于 2013-03-01T19:23:15.997 回答
0

您可以尝试以下两种方法之一 - 尝试抓取扩展名并将其与允许的扩展名数组或正则表达式匹配。

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());
于 2013-03-01T19:28:42.633 回答