Xác thực các phần mở rộng của tập tin từ một mảng

Question

Tôi đã tìm kiếm trên Web và SO để tự mình tìm ra một số cách khác, nhưng không thành công.

Tôi muốn hiển thị thông báo nếu tiện ích mở rộng tệp được chấp nhận hay không, trong cùng một kiểu với tuyên bố "outpush.push".

Điều này cần được lấy từ ARRAY của các đuôi tệp được chấp nhận như JPG, PNG, GIF và phát hiện xem phần mở rộng tệp có viết hoa và chấp nhận nó hay không (chuyển đổi thành chữ thường).

Đây là tập lệnh của tôi. Tôi tự hỏi làm thế nào và ở đâu trong kịch bản tôi có thể thực hiện một tính năng như vậy?

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

Answer 1

Có một vài vấn đề với mã của bạn.

1) Bạn nên sử dụng một if-else, thay vì nhiều if báo cáo:

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

2) all không phải là một giá trị hợp lệ cho display, sử dụng block hoặc inline:

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

3) Bạn đang sử dụng các thẻ <font> lỗi thời. Thay vào đó, hãy sử dụng kiểu và CSS. Trong trường hợp của bạn, tôi sẽ sử dụng các lớp học, một lớp cho một số msg, cộng với các lớp bổ sung cho error, important và ok.

4) Để làm việc kiểm tra mảng, chỉ cần sử dụng 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 ... 

Demo: http://jsfiddle.net/jtbowden/L2Gps/

Answer 2

Bạn có thể có các mảng như một cái gì đó như thế này:

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

và sau đó làm một cái gì đó như thế này trong của bạn cho vòng

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

More đọc về inArray().

Answer 3

Bạn có thể thử một trong hai cách tiếp cận - hãy thử lấy phần mở rộng và đối chiếu nó với một loạt các phần mở rộng được phép hoặc một biểu thức chính quy.

var accepted_types = ['jpg', 'gif', 'png']; 
if (accepted_types.indexOf(f.ext) > 0) { 
    output.push(...); 
} 

Đối với jQuery - bạn có thể cân nhắc những điều sau đây để xây dựng HTML của bạn

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