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

Posted 2023-02-25

技术标签:

【中文标题】如何允许 <input type="file"> 只接受图像文件？【英文标题】：How to allow <input type="file"> to accept only image files? 【发布时间】：2011-04-19 05:13:53 【问题描述】：

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

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

我怎样才能实现这个功能？

【问题讨论】：

服务器端使用什么技术？ 【参考方案1】：

使用输入标签的 accept 属性。要仅接受 PNG、JPEG 和 GIF，您可以使用以下代码：

&lt;input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" /&gt;

或者简单地说：

&lt;input type="file" name="myImage" accept="image/*" /&gt;

请注意，这仅向浏览器提供关于向用户显示哪些文件类型的提示，但这很容易绕过，因此您也应该始终在服务器上验证上传的文件。

它应该可以在 IE 10+、Chrome、Firefox、Safari 6+、Opera 15+ 中运行，但在移动设备上的支持非常粗略（截至 2015 年），并且根据一些报告，这实际上可能会阻止某些移动浏览器上传任何内容完全可以，所以一定要好好测试你的目标平台。

浏览器支持详情见http://caniuse.com/#feat=input-file-accept

【讨论】：

@madcap accept="file/csv, file/xls" 有效吗？？你确定是image/x-png？根据这个列表，它只是image/png。 iana.org/assignments/media-types/media-types.xhtml 当答案是答案时它可能会起作用，但只是尝试过并不适用于FF。我只需要添加 accept=".png, .jpg, .jpeg" 例如：jsfiddle.net/DiegoTc/qjsv8ay9/4 如果我想阻止文件名后显示的文件类型下拉菜单。我怎样才能做到这一点？因为如果我从下拉列表中选择所有类型选项，那么所有文件都被接受。不要完全依赖它。它也可以轻松接受其他文件。您只需要更改打开文件窗口中允许的文件类型即可。【参考方案2】：

使用这个：

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

适用于 FF 和 Chrome。

【讨论】：

accept 属性不是验证工具，所有上传都应该在服务器上进行验证，总是... 在原生 android 浏览器中仍然不支持，但在其他浏览器上运行良好我猜 caniuse.com/#feat=input-file-accept 我喜欢这个解决方案，因为在文件提示中，类型下拉菜单显示“图像文件”。请注意这一点，因为它允许您可能不想要的 SVG。这将允许最大图像文件 .png、.jpg、.jpeg、.gif、.bmp、.ico、.tiff、.svg、.ai、.psp、.pcd、.pct、。生的。所以最好具体提一下类型。【参考方案3】：

这样使用

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

它对我有用

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

【讨论】：

这不适用于 ios 12。用户仍然可以在设备中选择视频。【参考方案4】：

您可以将accept 属性用于<input type="file"> 阅读此文档http://www.w3schools.com/tags/att_input_accept.asp

【讨论】：

【参考方案5】：

这可以通过

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

但这不是一个好方法。您必须在服务器端编码以检查文件是否为图像。

检查图像文件是真实图像还是假图像

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;

更多参考，请看这里

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

【讨论】：

【参考方案6】：

步骤： 1.输入标签添加accept属性 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>

说明：

accept 属性过滤将显示在文件选择器弹出窗口。但是，这不是验证。它只是一个提示浏览器。用户仍然可以更改弹出窗口。 javascript 只验证文件扩展名，但不能真正验证选择文件是实际的 jpg 还是 png。所以你必须在服务器端编写文件内容验证。

【讨论】：

最完整的答案【参考方案7】：

使用 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

【讨论】：

这是最好的答案，因为它会检查文件是否真的是图像，而不需要开发人员指定他们想要允许的所有不同扩展名我明白你的想法。这是一个有效的 JS 语法：const file: File = imageInput.files[0]; 吗？此外，将 id 分配给输入也不是以传统方式完成的。其实不是JS，是typescript。块代码是从 Angular 项目中复制的。如果你想在 javascript 文件中使用它，你必须省略类型定义 (:File) 由于file.type是使用文件扩展名获取的，所以无法使用！您需要使用这样的一段代码来执行客户端验证：github.com/spine001/client-side-validation-of-file-type【参考方案8】：

如果您想一次上传多张图片，您可以在输入中添加multiple 属性。

upload multiple files: &lt;input type="file" multiple accept='image/*'&gt;

【讨论】：

【参考方案9】：

简单而强大的方式（动态接受）

将格式放在数组中，例如“image/*”

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

console.log(upload.value)
)

&lt;input type="file" id="upload" &gt;

【讨论】：

【参考方案10】：

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

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

【讨论】：

【参考方案11】：

在html中；

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

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

但是如果你使用的是django，在django forms.py中；

image_field = forms.ImageField(Here_are_the_parameters)

【讨论】：

accept="image/*" 不起作用。它只是过滤浏览器对话框以仅显示图像文件，但没有什么可以阻止您在下拉列表中选择所有文件并上传 pdf（或任何其他文件）。我认为您需要以类似于上述 Mati Cassanalli 的方式对其进行验证【参考方案12】：

其他人的答案为 ReactJS 重构（钩子）

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"> 只接受图像文件？的主要内容，如果未能解决你的问题，请参考以下文章

如何使 <input type="file"/> 只接受这些类型？

jQuery动态添加<input type="file">

强制 <input type="file"> 在移动设备中打开图库

如何修改input[type="file"]的默认样式

如何获取 <input type="number"> 字段的原始值？