如何允许只接受图像文件

I need to upload a file which is an image. I am using <input type="file">.

我需要上传一个图片文件。我使用。

However, this accepts all types of files. I need only files with extensions such as .jpg, .gif etc.

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

How can I make the upload dialog allow selection of only image files?

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

6 个解决方案

#1

572

Use the accept attribute of the input tag. So to accept only PNGs, JPEGs and GIFs you can use the following code:

使用输入标记的accept属性。因此，要只接受png、jpeg和gif格式，可以使用以下代码:

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

Or simply:

或者仅仅是:

<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.

它应该在IE 10+， Chrome, Firefox, Safari 6+， Opera 15+中工作，但是在移动设备上(2015年)的支持是非常模糊的，而且根据一些报道，这实际上可能会阻止一些移动浏览器上传任何东西，所以一定要好好测试你的目标平台。

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

对于详细的浏览器支持，请参见http://caniuse.com/#feat= inputfile -accept。

#2

127

Using this:

用这个:

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

works in both FF and Chrome.

适用于FF和Chrome。

#3

Use it like this

这样使用

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

It worked for me

它为我工作

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

#4

This can be achieved by

这可以通过

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

But this is not a good way. you have to code on the server side to check the file an image or not.

但这不是一个好办法。您必须在服务器端进行编码，以检查文件是否有映像。

Check if image file is an actual image or fake 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;
    }
}

For more reference, see here

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

#5

Steps:
1. Add accept attribute to input tag
2. Validate with javascript
3. Add server side validation to verify if the content is really an expected file type

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

For HTML and javascript:

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>

Explanation:

解释:

The accept attribute filters the files that will be displayed in the file chooser popup. However, it is not a validation. It is only a hint to the browser. The user can still change the options in the popup.
accept属性筛选将显示在文件选择器弹出窗口中的文件。然而，这并不是一种验证。这只是对浏览器的提示。用户仍然可以更改弹出框中的选项。
The javascript only validates for file extension, but cannot really verify if the select file is an actual jpg or png.
javascript只验证文件扩展名，但不能真正验证select文件是否是一个实际的jpg或png。
So you have to write for file content validation on server side.
因此，必须在服务器端编写文件内容验证。

#6

you can use accept attribute for <input type="file"> read this docs http://www.w3schools.com/tags/att_input_accept.asp

您可以使用accept属性为读取这个文档http://www.w3schools.com/tags/att_input_accept.asp

#1

572