如何使用JQuery在輸入類型文件中驗證文件擴展名？

Question

HTML：

<input type="file" name="group_documents_file" id="group_documents_file" class="group-documents-file" /> 

規則：上傳必須有一個擴展JPEG，GIF或PNG文件，否則必須顯示警報。

Answer 1

你只需要拉元素的值：

var fileName = $('#group_document_file').val(); 

var extension = fileName.slice('.')[fileName.slice('.').length - 1].toLowerCase(); 

if(extension == 'jpeg' || extension == 'gif' || extension == 'png') 
    // Show Validated Image 
else 
    alert('Choose a supported image format'); 

Answer 2

下獲取文件的擴展名：

JS：

$('#group_documents_file').change(function(){ 
    var value = this.value; 
    val = value.split("\\"); 
    var file = (val[val.length - 1]).split('.'); 
    var ext = file[file.length - 1]; 
    alert(ext); 
}) 

小提琴：http://jsfiddle.net/maniator/gveqX/

Answer 3

請看這裏：get the filename of a fileupload in a document through javascript關於如何獲取文件名：

var extension = $('#group_documents_file').val().match(/[^.]+$/).pop().toLowerCase(); 

這應該會讓你在文件名後面的任何內容。

編輯：

如果你不想使用正則表達式，我建議採用分體式，與流行：

var extension = $('#group_documents_file').val().split('.').pop().toLowerCase(); 

---

然後，檢查允許的擴展，請執行以下操作：

if (~$.inArray(extension, ['jpg', 'jpeg', 'gif', 'png'])) { 
    // correct file type... 
} else { 
    // incorrect file type... 
} 

Answer 4

試試這個

var fName = $('#group_document_file').val(); 

var validExtns ["jpg", "gif", "png"]; 

var extn = fName.slice('.')[fName.slice('.').length - 1]; 

if($.inArray(extn.toLowerCase(), validExtns) != -1){ 
    // Show Validated Image 
} 
else{ 
    alert('Invalid image format'); 
}