Ograniczyć format pliku podczas korzystania?

Istnieje atrybut accept dla znacznika wejściowego. Nie jest jednak w żaden sposób wiarygodny. Przeglądarki najprawdopodobniej traktują to jako "sugestię", co oznacza, że użytkownik będzie również, w zależności od menedżera plików, miał wstępną selekcję, która wyświetla tylko pożądane typy. Nadal mogą wybrać "wszystkie pliki" i przesłać dowolny plik, który chcą.

Na przykład:

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

Czytaj więcej w HTML5 spec

Należy pamiętać, że może być stosowany tylko jako "pomoc" dla użytkownika, aby znaleźć odpowiednie pliki. Każdy użytkownik może wysłać dowolne żądanie na twój serwer. Zawsze trzeba sprawdzać wszystko po stronie serwera.

Więc odpowiedź brzmi: Nie ty nie możesz ograniczać , Ale możesz ustawić wstępną selekcję, ale nie możesz polegać na niej.

Alternatywnie lub dodatkowo możesz zrobić coś podobnego, sprawdzając nazwę pliku (wartość pola wejściowego) za pomocą JavaScript, ale jest to nonsens, ponieważ nie zapewnia ochrony, a także nie ułatwia wyboru dla użytkownika. Tylko potencjalnie zmusza webmastera do myślenia, że jest chroniony i otwiera dziurę bezpieczeństwa. Może to być ból w dupie dla użytkowników, którzy mają alternatywne rozszerzenia plików (na przykład jpeg zamiast jpg), wielkie litery lub żadnych rozszerzeń plików (jak to jest powszechne w systemach Linux).

Można użyć zdarzenia change do monitorowania tego, co użytkownik wybiera i powiadamiania go w tym momencie, że plik nie jest akceptowalny. Nie ogranicza rzeczywistej listy wyświetlanych plików, ale jest najbliżej klienta, poza słabo obsługiwanym atrybutem accept.

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ąć przesył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ś w stylu:

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żna określić accept atrybut (alternatywa w html5 ) na elemencie input, ale nie jest poprawnie obsługiwany.

Użyj znacznika input z atrybutemaccept

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

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

Live demo tutaj

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

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

Live demo tutaj

Wyświetlane będą tylko gif, jpg i png, screen grab z 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ć z javascript, ale pamiętaj, że js jest po stronie klienta, więc będziesz "ostrzegał użytkowników", jakiego typu pliki mogą przesyłać, jeśli chcesz uniknąć (ograniczyć lub ograniczyć, jak powiedziałeś) określonego typu plików, musisz to zrobić po stronie serwera.

Spójrz na Ten podstawowy tut Jeśli chcesz rozpocząć walidację po stronie serwera. Aby zapoznać się z całym tutorialem, 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 bardzo przydatne jest użycie atrybutu accept tag on file w html.

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

Do tych wymagań naprawdę wolę struts2 Java web application development framework. Dzięki wbudowanej funkcji przesyłania plików, przesyłanie plików do aplikacji internetowych opartych na struts2 to bułka z masłem. Wystarczy wspomnieć o formatach plików, które chcielibyśmy zaakceptować w naszej aplikacji, a całą resztę zajmuje rdzeń samego frameworka. Możesz to sprawdzić na oficjalnej stronie struts.

Mogę zaproponować następujące:

• Jeśli Użytkownik ma domyślnie wybrać dowolny z plików graficznych, użyj accept= "image / *"

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

• Jeśli chcesz ograniczyć 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 pliku filer do wszystkich plików, więc zawsze sprawdzaj Typ pliku w skrypcie i serwerze

Możesz użyć atrybutu "accept" jako filtra w polu wyboru pliku. Użycie "accept" pomaga filtrować pliki wejściowe na podstawie ich "sufiksu" lub ich "typu meme"

1.Filtr na podstawie przyrostka: Tutaj atrybut "accept" pozwala tylko wybrać pliki z .rozszerzenie jpeg.

<input type="file" accept=".jpeg" />

2.Filtrowanie na podstawie " typu pliku" Tutaj atrybut " accept "pozwala tylko wybrać plik z typem" image/jpeg".

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

Ważne: możemy zmienić lub usunąć rozszerzenie pliku, bez zmiany typu mema. Na przykład można mieć plik bez rozszerzenia, ale typem tego pliku może być "image / jpeg". Więc ten plik nie może przekazać accept=".JPEG " filtr. ale może przekazać accept= "image / jpeg".

3.Możemy użyć*, aby wybrać każdy rodzaj pliku. Na przykład poniższy kod pozwala wybrać wszystkie rodzaje obrazów. na przykład "image / png" lub "image / jpeg" lub ... . Wszystkie z nich są dozwolone.

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

4.Możemy użyć cama ( , ) jako operatora " OR " w atrybucie select. Na przykład, aby umożliwić wszystkim rodzaj obrazów lub plików pdf możemy użyć tego kodu:

<input type="file" accept="image/* , application/pdf" />