2010-08-19 15 views
39
<input type='file' name='userFile'> 

teraz kiedy kliknie przycisk przeglądania, okno przeglądania pokaże wszystkie pliki ... co, jeśli chcę, aby filtrować typy plików powiedzmyHTML <input type = „file”> zastosować filtr

  • tylko obrazy lub .png & .jpg & .gifs
  • tylko plik biuro jak .doc & .docx & .pps

jak to zrobić ...

Odpowiedz

35

W elementach sterujących wprowadzaniem plików znajduje się atrybut "accept", w którym można określić typy żądanych plików. Z tego, co widzę, wiele przeglądarek lubi je ignorować - typy plików, które można określić, to typy MIME, więc ściśle poprawna przeglądarka musiałaby przeglądać każdy plik niezależnie od rozszerzenia i sprawdzać, czy jest to obraz (jeśli tak, jaki to jest).

Aktualizacja: Wydaje się co najmniej kilka wersji każdej większej przeglądarki w systemie Windows zapewnia teraz przynajmniej pewne wsparcie dla atrybutu accept. (Nawet IE obsługuje go, począwszy od wersji 10.) Jednak wciąż jest jeszcze trochę za wcześnie, aby na nim polegać, ponieważ IE 8 i 9 nadal go nie obsługują. A wsparcie w ogóle jest nieco nieregularne.

  • Wygląda na to, że Chrome ma pełne wsparcie. Korzysta z własnej wbudowanej listy typów, a także z systemu ... więc jeśli jedno z nich definiuje typ, Chrome wie, które pliki mają być wyświetlane.
  • IE 10 obsługuje rozszerzenia plików pięknie, a typy MIME przyzwoicie. Wydaje się, że do mapowania wykorzystuje tylko systemowe odwzorowanie typu MIME ... co zasadniczo oznacza, że ​​jeśli coś na komputerze użytkownika nie zarejestrowało tych rozszerzeń z odpowiednimi typami MIME, IE nie wyświetli plików tych typów MIME.
  • Opera wydaje się obsługiwać tylko typy MIME - do punktu, w którym rozszerzenia faktycznie wyłączają filtr - a interfejs użytkownika dla selektora plików jest do bani. Musisz wybrać typ, aby zobaczyć pliki tego typu.
  • Firefox obsługuje tylko ograniczony zestaw typów i ignoruje inne typy oraz rozszerzenia.
  • Nie mam Safari i nie planuję go pobrać. Jeśli ktoś mógłby udokumentować wsparcie Safari ... Częściowe wsparcie w safari. http://caniuse.com/#search=accept

Należy rozważyć dodanie atrybutu, dzięki czemu przeglądarki, które go obsługują, mogą ułatwić użytkownikowi znalezienie właściwych plików. Ale nadal sugerowałbym sprawdzenie nazwy pliku po jego wybraniu i wyświetlenie komunikatu o błędzie, jeśli zostanie przesłany plik z nieprawidłowym rozszerzeniem.

Oczywiście, oczywiście serwer powinien sprawdzić, czy plik jest prawidłowy. Rozszerzenia plików są tylko konwencją nazewnictwa i mogą być łatwo przekręcone.A nawet gdybyśmy mogli zaufać przeglądarce (której nie możemy), a nawet gdyby spróbował filtrować rzeczy, o które prosiłeś (a może nie), to szansa, że ​​rzeczywiście sprawdzi, czy ten plik jest naprawdę dokumentem Worda jest obok zer.

+1

"Atrybut accept nie jest poprawnie obsługiwany przez żadną z głównych przeglądarek." (cytowane z http://www.w3schools.com/TAGS/att_input_accept.asp) – Nick

+0

Nick ma rację. Próbowałem, że – Moon

+5

Cytowana strona brzmi teraz "Atrybut accept jest obsługiwany we wszystkich głównych przeglądarkach, z wyjątkiem Internet Explorera i Safari . " – Mopper

0

należy użyć one of the plugins że używanie osadzone Flash, ponieważ nie można tego zrobić z równinie javascript

+0

dziękuję, ale nie, dziękuję ... raczej sprawdzam typ pliku po jego wybraniu ... zaoszczędzi mi to dużo pracy – Moon

+3

+1, ponieważ jest to jedyne możliwe rozwiązanie (chociaż byłoby ładniej napisać kilka rzeczywiste linki zamiast wyszukiwania Google, które można zmienić). @Ponieważ będziesz musiał sprawdzić typ pliku później (to znaczy po przesłaniu) w każdym razie ... Jedyne, co możesz zrobić lokalnie po wybraniu, sprawdź rozszerzenie pliku, które nie jest w 100% wiarygodnym wskaźnikiem rzeczywistego typu pliku. –

+1

@Pekka 웃: Od HTML 5 przeglądarki liczbowe mogą w rzeczywistości [odczytać bajty wybranego pliku] (https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications). Nadal nie działa w IE <8, ale ponieważ bezpieczeństwo wymaga sprawdzenia w każdym razie, każda walidacja po stronie klienta jest tak naprawdę jedynym sposobem, aby pomóc użytkownikowi zmarnować swój czas. A jeśli nadal używają IE8, tak powoli, jak to jest, najwyraźniej nie mają nic przeciwko marnowaniu czasu ... :) – cHao

6

Nie można kontrolować, które pliki można wybrać, ale można odczytać nazwę pliku za pomocą javascript po wybraniu pliku. Następnie możesz wyświetlić ostrzeżenie i/lub wyłączyć przycisk przesyłania, jeśli plik jest nieprawidłowy. Pamiętaj jednak, że nie możesz polegać na rozszerzeniu, aby stwierdzić, czy plik jest naprawdę prawidłowy. Powinien być traktowany jedynie jako pomoc dla użytkowników, którzy inaczej mogliby marnować czas na przesłanie ogromnego pliku, zanim odkryje, że nie obsługuje tego typu plików.

Oto przykładowy kod do tego. Używa jQuery, ale możesz zrobić to samo w zwykłym javascript.

$(function() { 
    $('#inputId').change(function() { 
     var filename = $(this).val(); 
     if (! /\.txt$/.test(filename)) { 
      alert('Please select a text file'); 
     } 
    }); 
}); 
+0

jak tego użyć do wielu typów plików? – Jdoonan

36

Wydaje mi się, że szukasz parametru akceptacji. Spróbuj to działa

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

Zrobiłem łatwy sposób f lub sprawdzanie poprawności strony klienta w większości przypadków przy filtrowaniu plików. To jest całkiem proste. Teraz zanim przejdziesz i spróbujesz to zaimplementować, zrozum, że serwer MUSI sprawdzić ten plik, ponieważ filtrowanie javascript i HTML nie jest pewną rzeczą w przypadkach, gdy ktoś zmienia plik .js, a nawet HTML. Nie uwzględniam całego scenariusza dla prostego faktu, że cieszę się widząc, że inne implementują koncepcje za pomocą kreatywnego umysłu, ale są to kroki, które podejmowałem, które działają, dopóki nie znajdę lepszej odpowiedzi:

Utwórz obiekt js, który znajdzie dane wejściowe i obsługuje je.

Wywołanie funkcji, takiej jak OnClientUploadComplete dla formantu AsyncFileUpload modułu AjaxControlToolKit.

Wewnątrz tej funkcji zadeklaruj zmienną boolean: bIsAccepted (ustawioną na false) i string sFileName (po pobraniu nazwy pliku z argumentu).

W if..else Statement,

if(sFilename.indexOf(".(acceptedExtension1)") || 
    sFileName.indexOf(".(AcceptedExtension2)")) 
{ 
    bIsAccepted = true; 
} 
else 
{ 
    bIsAccepted = false; 
} 

następnie

if(bIsAccepted) 
{ 
//Process Data 
} 

Na serwerze, utworzenie listy akceptowanych rozszerzeń plików i przelotowego i przetwarzanie podobnie uczyni proces spoisty i konsekwentne, skutecznie pozwalając interfejsowi użytkownika i kodowaniu za pomocą filtra filtrować typy plików w niemal każdej sytuacji.

Ponieważ można to obejść, zmieniając nazwę, tak aby miała inne rozszerzenie pliku jako część nazwy, typ mime powinien również zostać sprawdzony przed przesłaniem do serwera w celu dalszego przetwarzania.

  [http://www.webmaster-toolkit.com/mime-types.shtml][1] 

Mam nadzieję, że to pomoże!

+2

(1) Sugestia: Zamiast wykonywać '.indexOf (każde zakodowane rozszerzenie)', weź wartość atrybutu "accept" kontrolki wejściowej, podziel ją przez ', \ s *' i sprawdź każdego członka tablica, którą odzyskasz. W tym momencie przynajmniej zaimplementowałeś działanie filtrujące 'accept' (nawet jeśli nie możesz sfałszować interfejsu użytkownika). – cHao

+0

(2) Po stronie klienta typy MIME nie są dużo bardziej niezawodne niż rozszerzenia - przeglądarka jest mało prawdopodobne, aby otworzyć plik i sprawdzić magiczne numery i tym podobne. Przechodzi przez to, co system zgłasza jako typ MIME i/lub jego własne rozszerzenia wewnętrzne typu. – cHao

-3

Korzystanie MVC możemy ograniczyć przesyłanie plików zip tylko

.HtmlAttributes(new { accept = ".zip*" }) 
1

Można użyć JavaScript. Weź pod uwagę, że dużym problemem z robieniem tego z JavaScriptem jest zresetowanie pliku wejściowego. Cóż, to ogranicza się tylko do JPG (do innych formatów trzeba będzie zmienić mime type i magic number):

<form id="form-id"> 
    <input type="file" id="input-id" accept="image/jpeg"/> 
</form> 

<script type="text/javascript"> 
    $(function(){ 
     $("#input-id").on('change', function(event) { 
      var file = event.target.files[0]; 
      if(file.size>=2*1024*1024) { 
       alert("JPG images of maximum 2MB"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      if(!file.type.match('image/jp.*')) { 
       alert("only JPG images"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      var fileReader = new FileReader(); 
      fileReader.onload = function(e) { 
       var int32View = new Uint8Array(e.target.result); 
       //verify the magic number 
       // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures) 
       if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) { 
        alert("ok!"); 
       } else { 
        alert("only valid JPG images"); 
        $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
        return; 
       } 
      }; 
      fileReader.readAsArrayBuffer(file); 
     }); 
    }); 
</script> 

zwrócić uwagę, że ten był testowany na najnowsze wersje Firefox i Chrome, a na IExplore 10.

For a complete list of mime types see Wikipedia.

For a complete list of magic number see Wikipedia.

Powiązane problemy