2

私は Web と SO を検索して、さまざまな方法で自分でこれを見つけましたが、成功しませんでした。

「outpush.push」ステートメントと同じ方法で、ファイル拡張子が受け入れられるかどうかを示すメッセージを表示したいと思います。

これは、JPG、PNG、GIF などの受け入れられるファイル拡張子の ARRAY から取得し、ファイル拡張子が大文字かどうかを検出して受け入れる (小文字に変換する) 必要があります。

これが私のスクリプトです。このような機能をスクリプトのどこにどのように実装できるのでしょうか?

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 を使用してください。あなたの場合、私はクラスを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 に答える