HTML <input type = „file”> zastosować filtr

Question

<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 powiedzmy

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

jak to zrobić ...

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

Należy używać MIME_type: Na przykład

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> 

to akceptuje tylko typ pliku *.xlsx ...

Na liście typów MIME, sprawdź poniższy link :
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 6

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!

Answer 7

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

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

Answer 8

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.