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

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

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

如何实现这个功能?

当前回答

这可以通过

<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

2016-08-09 17:13:08

其他回答

在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

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

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

或者仅仅是:

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

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

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

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

2011-06-03 10:20:55

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

2021-06-10 02:36:20

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

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

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

2020-07-21 03:25:25

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

推荐文章

最新文章

标签