2012-01-20 8 views
45

Chcę ograniczyć przeglądarkę do plików JPG po kliknięciu przycisku przeglądania na <input type="file">.Jak filtrować okno dialogowe typu wejściowego = "plik" według określonego typu pliku?

Czy można wyszukiwać określone typy plików?

+1

Jakie przycisk wysyłania? Wprowadzanie pliku HTML? Lampa błyskowa? Coś innego? – Thilo

+0

gdzie jest twój plik? na twoim komputerze lokalnym lub w Internecie? –

+0

Możliwe odpowiedzi: http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful – Matt

Odpowiedz

50

Zobacz http://www.w3schools.com/tags/att_input_accept.asp:

przyjęć atrybut jest dostępna we wszystkich głównych przeglądarek, z wyjątkiem Internet Explorer i Safari. Definicja i użycie

Atrybut accept określa rodzaje plików akceptowanych przez serwer (można je przesłać za pośrednictwem pliku).

Uwaga: Atrybutu accept można używać tylko z <input type="file">.

Wskazówka: tego atrybutu nie należy używać jako narzędzia do sprawdzania oryginalności. Przesyłanie plików powinno zostać sprawdzone na serwerze.

Składnia <input accept="audio/*|video/*|image/*|MIME_type" />

Wskazówka:.. Aby określić więcej niż jedną wartość, rozdzielając wartości przecinkiem (np <input accept="audio/*,video/*,image/*" />

+1

Dzięki .. Ale jak to naprawić dla IE? –

+6

Nie naprawiasz tego. To jest coś, nad czym nie masz kontroli. Po prostu wyjaśnij w interfejsie, że to, co użytkownik powinien wybrać, jest obrazem i sprawdź go po stronie serwera. Właśnie to oznacza "Przesyłanie plików powinno być sprawdzone na serwerze". –

+0

To powoduje, że mp4 nie jest dostępny w Safari. Musisz również podać 'video/mp4'. –

0

Dodaj atrybut niestandardowy do <input type="file" file-accept="jpg gif jpeg png bmp"> i odczytać nazwy plików wewnątrz javascript, który pasuje do rozszerzenia dostarczone przez atrybut file-accept. To będzie trochę fałszywe, ponieważ plik tekstowy z dowolnym z powyższych rozszerzeń zostanie błędnie zatrzymany jako obraz.

0
<asp:FileUpload ID="FileUploadExcel" ClientIDMode="Static" runat="server" /> 
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" Text="Upload Excel File" /> 

.

$('#btnUpload').click(function() { 
    var uploadpath = $('#FileUploadExcel').val(); 
    var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length); 

    if ($('#FileUploadExcel').val().length == 0) { 
     // write error message 
     return false; 
    } 

    if (fileExtension == "xls" || fileExtension == "xlsx") { 
     //write code for success 
    } 
    else { 
     //error code - select only excel files 
     return false; 
    } 

}); 
+0

@slavoo ~ na pewno używać wejść ASP OP musiałby być uruchomiony ASP? Dlaczego dodatek do edycji? Odpowiedź UserAK47 ich nie wymaga. – Pebbl

+1

@pebbl Otwórz wersje tego wpisu i przełącz na "side-by-side markdown" na rewizji nr 2, możesz zobaczyć wejścia asp było tutaj przed moją edycją, ale nie jest widoczne, ponieważ jest poza formatowaniem kodu. Naprawiam tylko format. – slavoo

+1

@slavoo ~ ah ma sens ... inaczej bym chociaż trochę dziwne :) ty dla wyjaśnienia. – Pebbl

45

To da poprawną (niestandardowe) filtra, gdy okno dialogowe Plik jest pokazane:

<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|images/*"> 
Powiązane problemy