Ogranicz wybór przesyłania plików do określonych typów

Question

Aby ograniczyć wybór typów plików za pomocą elementu <input type="file" />?

Na przykład, jeśli chciałbym, aby przesyłano tylko typy obrazów, ograniczyłbym możliwe wybory do (image/jpg, image/gif, image/png), a okno dialogowe wyboru wyszarzy pliki innych typów MIME .

p.s. Wiem, że mogę to zrobić po fakcie z File API, skanując atrybuty .type. Naprawdę staram się ograniczyć to przed ręką. Wiem też, że mogę to zrobić za pomocą flasha, ale NIE chcę używać do tego flasha.

Answer 1

Istnieje atrybut html dla tego konkretnego celu o nazwie accept, ale ma niewielkie wsparcie dla różnych przeglądarek. Z tego powodu zalecana jest walidacja po stronie serwera.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> 

Jeśli nie masz dostępu do backend spojrzeć na rozwiązania oparte rzutowej jak SWFUpload.

Zobacz więcej na ten temat tutaj: File input 'accept' attribute - is it useful?

Answer 2

Lepiej pozwolić użytkownikowi wybrać dowolny plik, a następnie sprawdzić jego typ - to lepiej obsługiwane przez przeglądarki:

var 
    file = (el[0].files ? el[0].files[0] : el[0].value || undefined), 
    supportedFormats = ['image/jpg','image/gif','image/png']; 

if (file && file.type) { 
    if (0 > supportedFormats.indexOf(file.type)) { 
     alert('unsupported format'); 
    } 
    else { 
     upload(); 
    } 
} 

Można również sprawdzić dla rozmiaru pliku przy użyciu właściwości file.size.