如何允许<input type="file">只接受图像文件?

我只需要通过<input type="file">标签上传图像文件。

现在，它接受所有的文件类型。但是，我想将其限制为特定的图像文件扩展名，包括.jpg， .gif等。

如何实现这个功能?

当前回答

使用type="file"和accept="image/*"(或者你想要的格式)，允许用户选择一个特定格式的文件。但是你必须在客户端重新检查，因为用户可以选择其他类型的文件。这对我很有用。

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

然后，在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
    }
  }

2019-10-03 12:18:22

其他回答

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

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

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

2022-04-07 11:41:56

你可以使用accept属性<input type="file">读取这个文档http://www.w3schools.com/tags/att_input_accept.asp

2015-09-29 07:55:04

在html中;

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

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

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

image_field = forms.ImageField(Here_are_the_parameters)

2020-11-01 07:26:36

步骤: 1. 为输入标签添加接受属性 2. 使用javascript验证 3.添加服务器端验证，以验证内容是否确实是预期的文件类型

对于HTML和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>

解释:

属性中显示的文件进行筛选弹出文件选择器。然而，它不是一个验证。这只是一个浏览器提示。中的选项，用户仍然可以更改弹出。 javascript只验证文件扩展名，但不能真正验证所选文件是真正的JPG还是png。因此，您必须在服务器端编写文件内容验证。

2017-06-04 11:34:34

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

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

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

2020-07-21 03:25:25

如何允许<input type="file">只接受图像文件?

推荐文章

最新文章

标签