Wie kann man zulassen, dass <input type="file"> nur Bilddateien akzeptiert?

Question

Ich muss nur eine Bilddatei hochladen über <input type="file"> Tag.

Zurzeit werden alle Dateitypen akzeptiert. Ich möchte es jedoch auf bestimmte Bilddateierweiterungen beschränken, darunter .jpg , .gif usw.

Wie kann ich diese Funktionalität erreichen?

Answer 1

Wenn Sie mehrere Bilder auf einmal hochladen möchten, können Sie Folgendes hinzufügen multiple Attribut zur Eingabe.

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

Answer 2

Einfache und leistungsfähige Methode (dynamische Annahme)

Formate in Array wie "image/*" einfügen

var upload=document.getElementById("upload");
var array=["video/mp4","image/png"];
upload.accept=array;
upload.addEventListener("change",()=>{

console.log(upload.value)
})

<input type="file" id="upload" >

Answer 3

Die Antworten anderer Leute für ReactJS umgestaltet (Hooks)

import React from 'react';

const ImageUploader = () => {

    const handleImageUpload = (e) => {
        // If no file selected, return
        if (e.target.files.length === 0) return false;
        const file = e.target.files[0];

        // If no image selected, return
        if (!/^image\//.test(file.type)) {
            alert(`File ${file.name} is not an image.`);
            return false;
        }

        // ...
    };

    return (
        <>
            <input type='file' accept='image/*' onChange={(e) => handleImageUpload(e)} />
        </>
    );
};

export default ImageUploader;