像这样使用它

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

这对我很有效

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

使用输入标记的accept属性。要只接受PNG, JPEG和GIF，您可以使用以下代码:

<标签>你的形象文件 <输入类型=“文件” < - >标签

或者仅仅是:

<标签>你的形象文件 <输入类型=“文件” < - >标签

请注意，这只向浏览器提供了一个提示，提示要向用户显示什么文件类型，但这很容易避免，因此您也应该始终在服务器上验证上传的文件。

它应该可以在IE 10+， Chrome, Firefox, Safari 6+， Opera 15+上运行，但在手机上的支持非常粗略(截至2015年)，根据一些报告，这实际上可能会阻止一些移动浏览器上传任何东西，所以一定要好好测试你的目标平台。

有关浏览器支持的详细信息，请参见http://caniuse.com/#feat=input-file-accept

在html中;

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

这将接受所有的图像格式，但不接受其他文件，如pdf或视频。

但是如果你使用的是django, django forms.py;

image_field = forms.ImageField(Here_are_the_parameters)

用这个:

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

工作在FF和Chrome。

简单而强大的方式(动态接受)

将格式放在数组中，如"image/*"

var上传“上传”= document . getElementById (); var阵列= [/ mp4视频”,“image / p”); 上传. accept =阵列; 上传addEventListener(“change”()= > ' 上传游戏机。log (value)。 ') <输入类型=“文件”id=“上传”>

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

<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')
    }
  }