驗證數組中的文件擴展名

我已經搜索了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);

來源

2013-03-01 Funk Forty Niner

哪裏jQuery的？所有這些看起來像基本的JavaScript。 – 2013-03-01 19:18:56

你說得對。我會編輯我的問題。我以爲是。 – 2013-03-01 19:21:49

下面已經有了答案，但我會補充說你有'if（f.size> max_size）'和'if（f.size 2013-03-01 19:37:23

有幾個與你的代碼的問題如下。

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/

來源

2013-03-01 22:00:13

謝謝傑夫，我非常感謝。乾杯 – 2013-03-02 00:25:13

你可以有數組是這樣的：

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-01 19:23:15 RenegadeMatrix

其他答案對香草javascript有好處。我會保留這個答案以供參考 – RenegadeMatrix 2013-03-01 19:41:16

您可以嘗試以下兩種方法之一 - 嘗試抓取擴展名並將其與允許的擴展名或正則表達式匹配。

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-01 19:28:42

驗證數組中的文件擴展名

回答

相關問題