Ogranicz format pliku przy użyciu <input type = „file”>?

Chciałbym ograniczyć typ pliku, który można wybrać z natywnego selektora plików systemu operacyjnego, gdy użytkownik kliknie przycisk Przeglądaj w <input type="file">elemencie HTML. Mam wrażenie, że to niemożliwe, ale chciałbym wiedzieć, czy jest jakieś rozwiązanie. Chciałbym trzymać się wyłącznie HTML i JavaScript; proszę nie Flash.

Ściśle mówiąc, odpowiedź brzmi „ nie” . Deweloper nie może uniemożliwić użytkownikowi przesyłania plików dowolnego typu lub rozszerzenia.

Mimo to atrybut accept<input type = "file"> może pomóc w zapewnieniu filtru w oknie dialogowym wyboru pliku w systemie operacyjnym. Na przykład,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

powinien zapewnić sposób na odfiltrowanie plików innych niż .xls lub .xlsx. Chociaż strona MDN dla inputelementu zawsze mówiła, że ​​to obsługuje, ku mojemu zaskoczeniu, nie działało to dla mnie w Firefoksie do wersji 42. To działa w IE 10+, Edge i Chrome.

Tak więc, do obsługi Firefoksa starszego niż 42 wraz z IE 10+, Edge, Chrome i Opera, myślę, że lepiej jest używać listy typów MIME oddzielonych przecinkami:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

Zachowanie [ Edge (EdgeHTML): lista rozwijana filtru typów plików pokazuje typy plików wymienione tutaj, ale nie jest domyślna w liście rozwijanej. Domyślny filtr to All files (*).]

Możesz także używać gwiazdek w typach MIME. Na przykład:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C zaleca autorom określenie w acceptatrybucie zarówno typów MIME, jak i odpowiednich rozszerzeń . Zatem najlepszym podejściem jest:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle tego samego: tutaj .

Odniesienie: Lista typów MIME

WAŻNE: Użycie tego acceptatrybutu zapewnia jedynie sposób filtrowania w interesujących plikach typów. Przeglądarki nadal pozwalają użytkownikom wybierać pliki dowolnego typu. Należy wykonać dodatkowe kontrole (po stronie klienta) (przy użyciu JavaScript, jednym ze sposobów byłoby to ), a zdecydowanie typy plików MUSZĄ zostać zweryfikowane na serwerze , przy użyciu kombinacji typu MIME przy użyciu zarówno rozszerzenia pliku, jak i jego podpisu binarnego ( ASP .NET , PHP , Ruby , Java ). Możesz także zapoznać się z tymi tabelami, aby uzyskać informacje o typach plików i ich magicznych liczbach, aby przeprowadzić bardziej niezawodną weryfikację po stronie serwera.

Oto trzy dobre czyta na przesyłaniu plików i bezpieczeństwa.

EDYCJA: Może weryfikacja typu pliku za pomocą jego podpisu binarnego może być również przeprowadzona po stronie klienta za pomocą JavaScript (a nie tylko poprzez spojrzenie na rozszerzenie) za pomocą interfejsu API plików HTML5, ale plik musi zostać zweryfikowany na serwerze, ponieważ złośliwy użytkownik nadal będzie mógł przesyłać pliki, wysyłając niestandardowe żądanie HTTP.

Istnieje atrybut accept dla znacznika wejściowego. Jednak nie jest w żaden sposób wiarygodny. Przeglądarki najprawdopodobniej traktują to jako „sugestię”, co oznacza, że ​​użytkownik, w zależności od menedżera plików, będzie miał wstępny wybór, który wyświetla tylko żądane typy. Nadal mogą wybrać „wszystkie pliki” i przesłać dowolny plik.

Na przykład:

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

Przeczytaj więcej w specyfikacji HTML5

Należy pamiętać, że może on służyć jedynie jako „pomoc” dla użytkownika w znalezieniu odpowiednich plików. Każdy użytkownik może wysłać dowolne żądanie na serwer. Zawsze musisz zweryfikować wszystko po stronie serwera.

Więc odpowiedź brzmi: nie ty nie może ograniczać , ale można ustawić preselekcji, ale nie można na nim polegać.

Alternatywnie lub dodatkowo możesz zrobić coś podobnego, sprawdzając nazwę pliku (wartość pola wejściowego) za pomocą JavaScript, ale to nonsens, ponieważ nie zapewnia ochrony, a także nie ułatwia wyboru użytkownika. To tylko potencjalnie może skłonić webmastera do myślenia, że ​​jest chroniony i otwiera lukę w zabezpieczeniach. Dla użytkowników, którzy mają alternatywne rozszerzenia plików (na przykład jpeg zamiast jpg), duże lub nie mają żadnych rozszerzeń plików (jak to często bywa w systemach Linux), może to być kłopotliwe.

Możesz użyć changezdarzenia do monitorowania tego, co użytkownik wybiera i powiadamiania go w tym momencie, że plik jest niedopuszczalny. Nie ogranicza faktycznej listy wyświetlanych plików, ale jest to najbliższa czynność po stronie klienta, oprócz słabo obsługiwanego acceptatrybutu.

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

Tak masz rację. To niemożliwe z HTML. Użytkownik będzie mógł wybrać dowolny plik, który chce.

Możesz napisać fragment kodu JavaScript, aby uniknąć przesłania pliku na podstawie jego rozszerzenia. Należy jednak pamiętać, że w żaden sposób nie uniemożliwi to złośliwemu użytkownikowi przesłania dowolnego pliku, który naprawdę chce.

Coś jak:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

Kod HTML:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Technicznie możesz określić acceptatrybut (alternatywny w html5 ) dla inputelementu, ale nie jest on poprawnie obsługiwany.

Użyj inputtagu z acceptatrybutem

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Kliknij tutaj, aby wyświetlić najnowszą tabelę zgodności przeglądarki

Demo na żywo tutaj

Aby wybrać tylko pliki obrazów, możesz użyć tego accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Demo na żywo tutaj

Wyświetlane będą tylko gif, jpg i png, zrzut ekranu z przeglądarki Chrome w wersji 44

Wiem, że to trochę za późno.

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

Możesz to zrobić za pomocą javascript, ale pamiętaj, że js jest po stronie klienta, więc w rzeczywistości „ostrzegasz użytkowników”, jakie typy plików mogą przesłać, jeśli chcesz UNIKNĄĆ (ograniczyć lub ograniczyć, jak powiedziałeś) określonego rodzaju plików, które MUSISZ zrób to po stronie serwera.

Spójrz na ten podstawowy poradnik, jeśli chcesz zacząć od sprawdzania poprawności po stronie serwera. Aby zobaczyć cały samouczek, odwiedź tę stronę .

Powodzenia!

Jak wspomniano w poprzednich odpowiedziach, nie możemy ograniczać użytkownika do wybierania plików tylko dla podanych formatów plików. Ale naprawdę przydatne jest użycie atrybutu accept w pliku html.

Jeśli chodzi o sprawdzanie poprawności, musimy to zrobić po stronie serwera. Możemy to również zrobić po stronie klienta w js, ale nie jest to niezawodne rozwiązanie. Musimy zweryfikować po stronie serwera.

W przypadku tych wymagań naprawdę wolę środowisko programowania aplikacji WWW struts2 Java. Dzięki wbudowanej funkcji przesyłania plików przesyłanie plików do aplikacji internetowych opartych na struts2 jest dziecinnie proste. Wystarczy wspomnieć o formatach plików, które chcielibyśmy zaakceptować w naszej aplikacji, a całą resztę zajmuje sam rdzeń frameworka. Możesz to sprawdzić na oficjalnej stronie firmy Struts.

Mogę zasugerować następujące:

• Jeśli musisz domyślnie wybrać dowolny plik obrazu, użyj accept = "image / *"

  <input type="file" accept="image/*" />

• jeśli chcesz ograniczyć się do określonych typów obrazów, użyj accept = "image / bmp, image / jpeg, image / png"

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• jeśli chcesz ograniczyć się do określonych typów, użyj accept = ". bmp, .doc, .pdf"

  <input type="file" accept=".bmp, .doc, .pdf" />

• Nie można ograniczyć użytkownika do zmiany filtru plików na wszystkie pliki, dlatego zawsze należy sprawdzać poprawność typu pliku w skrypcie i serwerze