标签上传图像文件。现在，它接受所有文件类型。但是，我想将它限制为仅特定的图像文件的扩展名，其中包括...."> 标签上传图像文件。现在，它接受所有文件类型。但是，我想将它限制为仅特定的图像文件的扩展名，其中包括...."/> 标签上传图像文件。现在，它接受所有文件类型。但是，我想将它限制为仅特定的图像文件的扩展名，其中包括...."> 标签上传图像文件。现在，它接受所有文件类型。但是，我想将它限制为仅特定的图像文件的扩展名，其中包括....">

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

html HTML

乐

2020-03-23

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

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

如何实现此功能？

第2897篇《如何允许<input type =“ file”>仅接受图像文件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
SamGreen 2020.03.23

这可以通过

<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

Jim古一 2020.03.23

步骤：
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>

说明：

  1. accept属性过滤将在文件选择器弹出窗口中显示的文件。但是，这不是验证。这只是浏览器的提示。用户仍然可以在弹出窗口中更改选项。
  2. javascript仅验证文件扩展名，而不能真正验证所选文件是实际的jpg还是png。
  3. 因此，您必须在服务器端编写文件内容验证。
伽罗 2020.03.23

这样使用 

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

对我有用

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

宝儿 2020.03.23

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

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

或者简单地：

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

Note that this only provides a hint to the browser as to what file-types to display to the user, but this can be easily circumvented, so you should always validate the uploaded file on the server also.

It should work in IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, but support is very sketchy on mobiles (as of 2015) and by some reports this may actually prevent some mobile browsers from uploading anything at all, so be sure to test your target platforms well.

For detailed browser support, see http://caniuse.com/#feat=input-file-accept

宝儿 2020.03.23

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

神乐 2020.03.23

使用这个：

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

在FF和Chrome中均可使用。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android