Come consentire a <input type = “file”> di accettare solo file di immagine?

376

Devo caricare solo il file immagine tramite <input type="file">tag.

In questo momento, accetta tutti i tipi di file. Ma voglio limitarlo solo a estensioni di file immagine specifiche che includono .jpg, .gifecc.

Come posso ottenere questa funzionalità?

html

— kbvishnu
fonte

Qual è la tecnologia utilizzata sul lato server?

— Erdal G.

1

kbvishnu, forse potresti riconsiderare la risposta che hai accettato tanto tempo fa. Non devi accettare un'altra risposta. Sto solo suggerendo, in base al numero di bandiere che abbiamo ottenuto sulla risposta e al suo livello di voti rispetto ad altre risposte, che forse dovresti almeno considerare di accettarla.

— Aaron Hall

944

Utilizzare l' attributo accetta del tag di input. Quindi per accettare solo PNG, JPEG e GIF puoi usare il seguente codice:

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

Espandi frammento

O semplicemente:

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

Espandi frammento

Si noti che ciò fornisce solo un suggerimento per il browser su quali tipi di file visualizzare all'utente, ma questo può essere facilmente aggirato, quindi è necessario convalidare sempre anche il file caricato sul server.

Dovrebbe funzionare in IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, ma il supporto è molto impreciso sui cellulari (a partire dal 2015) e da alcuni rapporti questo potrebbe effettivamente impedire ad alcuni browser mobili di caricare qualsiasi cosa, quindi assicurati di testare bene le tue piattaforme target.

Per un supporto dettagliato del browser, consultare http://caniuse.com/#feat=input-file-accept

— risate folli
fonte

@madcap accept="file/csv, file/xls"è valido ??

— KNU,

19

Sei sicuro che sia image/x-png? Secondo questo elenco, è giusto image/png. iana.org/assignments/media-types/media-types.xhtml

— Micros

6

Questa dovrebbe essere la risposta selezionata! Manca solo una nota che dice che devi ancora controllare sul lato server (a causa del browser non supportato, ma anche per la sicurezza)

— Erdal G.

1

Probabilmente funziona quando la risposta è stata la risposta, ma l'ho appena provata e non ha funzionato per FF. Ho solo bisogno di aggiungere accept = ". Png, .jpg, .jpeg" Ad esempio: jsfiddle.net/DiegoTc/qjsv8ay9/4

— Diego

1

Non fare affidamento su di esso completamente. Può accettare facilmente anche altri file. Hai solo bisogno di cambiare il tipo di file consentito nella finestra del file aperto.

164

Usando questo:

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

funziona sia in FF che in Chrome.

— Tyilo
fonte

14

L'attributo accetta non è uno strumento di convalida, tutti i caricamenti devono essere convalidati sul server, sempre ...

— TlonXP

1

non è ancora supportato nel browser Android nativo, ma funziona bene anche su altri immagino caniuse.com/#feat=input-file-accept

— mcy

Mi piace questa soluzione perché nel prompt dei file il menu a discesa mostra "File immagine".

— duro

Fai attenzione, perché consente SVG, che potresti non voler.

— stephenmurdoch,

Ciò consentirà il massimo numero di file di immagine .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Quindi è meglio menzionare il tipo in modo specifico.

— Thamarai,

76

Usalo in questo modo

<input type="file" accept=".png, .jpg, .jpeg" />

Ha funzionato per me

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— Er. Mohit Agrawal
fonte

Questo non funziona per iOS 12. L'utente può comunque scegliere il video nel dispositivo.

— user3160227

29

Passaggi:
1. Aggiungi attributo accetta al tag di input
2. Convalida con JavaScript
3. Aggiungi la convalida lato server per verificare se il contenuto è davvero un tipo di file previsto

Per HTML e JavaScript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Spiegazione:

L'attributo accetta filtra i file che verranno visualizzati nel popup di selezione file. Tuttavia, non è una convalida. È solo un suggerimento per il browser. L'utente può comunque modificare le opzioni nel popup.
Il javascript è valido solo per l'estensione del file, ma non può davvero verificare se il file selezionato è un vero jpg o png.
Quindi devi scrivere per la convalida del contenuto del file sul lato server.

— Surya Kameswara Rao Ravi
fonte

1

risposta più completa

— paranoidhominid

27

Questo può essere raggiunto da

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

Ma questo non è un buon modo. devi codificare sul lato server per controllare il file un'immagine o no.

Controlla se il file immagine è un'immagine reale o falsa

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

Per ulteriori riferimenti, vedere qui

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— Ashok Devatwal
fonte

5

puoi usare l' acceptattributo per <input type="file">leggere questo documento http://www.w3schools.com/tags/att_input_accept.asp

— yussan
fonte

3

Utilizzando type = "file" e accetta = "image / *" (o il formato desiderato), consenti all'utente di scegliere un file con un formato specifico. Ma devi ricontrollarlo nuovamente sul lato client, perché l'utente può selezionare un altro tipo di file. Questo funziona per me.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

E poi, nel tuo script javascript

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— Mati Cassanelli
fonte

Questa è la risposta migliore, poiché verificherà se il file è effettivamente un'immagine senza richiedere allo sviluppatore di specificare tutte le diverse estensioni che vogliono consentire

— Adam Marshall,

Ho avuto la tua idea. Si tratta di una sintassi JS valida: const file: File = imageInput.files[0];? Inoltre, l'assegnazione dell'id all'input non viene eseguita in modo convenzionale.

— Ivan P.

In realtà, non è JS, è dattiloscritto. Il codice a blocchi è stato copiato da un progetto angolare. Se vuoi usarlo in un file javascript, devi omettere la definizione del tipo (: File)

— Mati Cassanelli

0

Se desideri caricare più immagini contemporaneamente, puoi aggiungere l' multipleattributo all'input.

upload multiple files: <input type="file" multiple accept='image/*'>

Espandi frammento

— JerryGoyal
fonte