像这样使用它

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

这对我很有效

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

你可以添加特定类型的图像或其他文件类型，并在你的代码中进行验证:

<input  style="margin-left: 10px; margin-top: 5px;" type="file" accept="image/x-png,image/jpeg,application/pdf"
                (change)="handleFileInput($event,'creditRatingFile')" name="creditRatingFile" id="creditRatingFile">
    


  
      handleFileInput(event) {
    console.log(event);
    const file = event.target.files[0];
    if (file.size > 2097152) {
        throw err;
    } else if (
      file.type !== "application/pdf"  &&
      file.type !== "application/wps-office.pdf"   && 
      file.type !== 'application/pdf'  && file.type !== 'image/jpg'  && file.type !== 'image/jpeg'  && file.type !== "image/png"
    ) {
throw err;
    } else {
      
        console.log('file valid')
    }
  }

只是作为一个补充:如果你想包括所有的现代图像文件类型与最好的跨浏览器支持，它应该是:

<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">

这允许在大多数浏览器中显示的所有图像文件类型，同时排除不太常见的格式，如TIFF或不适合web的格式，如PSD。

其他人的答案为ReactJS重构(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;

像这样使用它

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

这对我很有效

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

用这个:

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

工作在FF和Chrome。