Bir dizideki dosya uzantılarının doğrulanması

Question

Web ve SO için arama yaptım.

Dosya uzantısı kabul edilirse veya olmasın "outpush.push" ifadeleriyle aynı şekilde bir mesaj göstermek istiyorum. Bu, JPG, PNG, GIF gibi kabul edilen dosya uzantılarından bir ARRAY'dan alınmalı ve dosya uzantısının büyük olup olmadığını algılayacak ve kabul edecektir (küçük harfe dönüştürecektir).

İşte benim komut dosyası. Senaryoda nasıl ve nerede böyle bir özelliği uygulayabilirim?

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

HTML oluşturmak için aşağıdaki düşünebilirsiniz.

1) yerine birden if tabloların, bir if-else kullanmalıdır:

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

2) all

display için geçerli bir değer değil kullanmak block veya inline:

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

3) Güncel olmayan <font> etiketlerini kullanıyorsunuz. Bunun yerine stilleri ve CSS'yi kullanın. Sizin durumunuzda, msg için bir tane, artı error, important ve ok için ek sınıflar kullanacağım.

4) sadece indexOf() kullanmak, dizi kontrolü yapmak için:

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öyle bir şey olarak diziyi sahip olabilir:

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

ve ardından For döngüsü

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

Daha okuma parçasıyla ilgili inArray() yılında böyle bir şey yapmak.

Answer 3

İki yaklaşımdan birini deneyebilirsiniz - uzantıyı almayı deneyin ve izin verilen bir uzantı dizisiyle veya normal ifadeyle eşleştirin.

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

jQuery gelince - Eğer kodu ile sorunların bir çift vardır

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