首页 文章

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

提问于
浏览 次
226

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

但是，这会接受所有类型的文件 . 我只需要扩展名为 .jpg ， .gif 等的文件 .

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

html

6 回答

  • 665

    使用输入标记的 accept 属性 . 因此，要仅接受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

    回复于
  • 5

    使用这个：

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

    适用于FF和Chrome .

    回复于
  • 22

    像这样使用它

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

    它对我有用

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

    回复于
  • 52

    这可以通过以下方式实现

    <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

    回复于
  • 11

    脚步：
    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 .

    • 所以你必须在服务器端编写文件内容验证 .

    回复于
  • 136

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

    回复于

相关问题