2012-01-20 11 views
45

Voglio limitare il browser ai file JPG quando faccio clic sul pulsante Sfoglia dello <input type="file">.Come filtrare il tipo di input = "file" per tipo di file specifico?

È possibile cercare determinati tipi di file?

+1

Che tipo di pulsante di caricamento? Input di file HTML? Veloce? Qualcos'altro? – Thilo

+0

dov'è il tuo file? nel tuo computer locale o sul web? –

+0

Risposta possibile: http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful – Matt

risposta

50

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

Il accetta attributo è supportato in tutti i principali browser, ad eccezione Internet Explorer e Safari. Definizione e utilizzo

L'attributo accept specifica i tipi di file accettati dal server (che possono essere inviati tramite un caricamento di file).

Nota: l'attributo accept può essere utilizzato solo con <input type="file">.

Suggerimento: non utilizzare questo attributo come strumento di convalida. I file caricati devono essere convalidati sul server.

Sintassi <input accept="audio/*|video/*|image/*|MIME_type" />

Suggerimento:.. Per specificare più di un valore, separare i valori con una virgola (ad es <input accept="audio/*,video/*,image/*" />

+1

Grazie .. Ma come risolverlo per IE ?? –

+6

Non aggiustarlo. È qualcosa su cui non hai alcun controllo. Basta chiarire nell'interfaccia utente che l'utente deve selezionare un'immagine e convalidarla sul lato server. Questo è ciò che significa "Il caricamento dei file deve essere convalidato sul server". –

+0

Ciò rende mp4 non selezionabile in Safari. Devi anche specificare 'video/mp4'. –

0

È possibile utilizzare l'attributo accettare insieme alla E non lo fa lavoro in IE e Safari

A seconda della scala del progetto e dell'estensione, è possibile utilizzare Struts. Struts offre due modi per limitare il tipo di file caricato, in modo dichiarativo e programmatico LY.

Per maggiori informazioni: http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes

0

Aggiungi un attributo personalizzato per <input type="file" file-accept="jpg gif jpeg png bmp"> e leggere i nomi dei file all'interno di javascript che corrisponde l'estensione fornita dall'attributo file-accept. Questo sarà un po 'falso, poiché un file di testo con una delle estensioni di cui sopra verrà erroneamente individuato come immagine.

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 ~ sicuramente per utilizzare gli input ASP che l'OP avrebbe bisogno di eseguire ASP? Perché l'aggiunta nella tua modifica? La risposta di UserAK47 non li ha richiesti. – Pebbl

+1

@pebbl Aprire revisioni di questo post e passare a "side-by-side markdown' sulla revisione n. 2, è possibile vedere gli input di asp era qui prima della mia modifica, ma non è visibile, perché è fuori dalla formazione del codice. Ho risolto solo il formato. – slavoo

+1

@slavoo ~ ah questo ha senso ... altrimenti avrei comunque un po 'strano :) ty per il chiarimento. – Pebbl

45

Questo darà il filtro corretto (personalizzato) quando la finestra di dialogo file sta mostrando:

<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|images/*"> 
Problemi correlati