Question

我需要上传一个图像文件。我正在使用<input type="file">。

但是，它接受所有类型的文件。我只需要包含.jpg，.gif等扩展名的文件。

如何让上传对话框只允许选择图像文件？

Answer 1

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

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

或者简单地说：

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

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

它应该适用于IE 10 +，Chrome，Firefox，Safari 6 +，Opera 15+，但支持在手机上非常粗略（截至2015年），有些报道实际上可能会阻止某些移动浏览器上传任何内容所有，所以一定要好好测试你的目标平台。

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

Answer 2

使用此：

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

适用于FF和Chrome。

Answer 3

像这样使用

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

它对我有用

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

Answer 4

这可以通过

来实现

<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.asp
http://www.w3schools.com/php/php_file_upload.asp

Answer 5

步骤：
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。
因此，您必须在服务器端编写文件内容验证。

Answer 6

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

Answer 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
    }
  }

Answer 8

为 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;

Answer 9

如果要一次上传多张图像，可以添加multiple属性以进行输入。

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

Answer 10

使用html;

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

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

但是，如果您使用的是django，请使用django Forms.py;

image_field = forms.ImageField(Here_are_the_parameters)

Answer 11

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

将格式放置在“图像/ *”之类的数组中

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 12

我知道我迟到了，但这可能会有所帮助。您可以添加特定类型的图片或其他文件类型，然后在代码中进行验证：

[...items]

如何允许<input type =“file”/>仅接受图像文件

12 个答案: