技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

input type="file" 文件选择器按钮只允许选择图片的6种方法

作者:admin    时间:2023-4-17 20:36:9    浏览:

能否通过<input type="file">标签只允许上传图像文件?

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

如何实现此功能?本文介绍一些实现的方法。

 <input type="file">文件选择器按钮只允许选择图片的6种方法

1、使用accept

使用输入标记的accept属性,若想只接受PNG、JPEG和GIF,可以使用以下代码:

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

或者简单地

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

也可以使用这个

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

请注意,这只会向浏览器提供向用户显示哪些文件类型的提示,但这很容易避免,因此你也应该始终在服务器上验证上传的文件。

它应该适用于IE 10+、Chrome、Firefox、Safari 6+、Opera 15+,据一些报道,这实际上可能会阻止一些手机浏览器上传任何内容,所以一定要测试好你的目标平台。

2、使用JavaScript

步骤:

  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。

因此,你必须在服务器端编写文件内容验证。

检查图像文件是真实图像还是伪造图像(PHP):

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

3、使用TypeScript检查文件是否真的是一个图像

使用type="file"accept="image/*"(或你想要的格式),允许用户选择具有特定格式的文件,但你必须在客户端重新检查,因为用户可以选择其他类型的文件。

HTML

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

TypeScript

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // 在这里,你可以对你的图像做任何事情。现在你确定它是一个图像。
    }
}

这是最好的方法,因为它可以检查文件是否真的是一个图像,而不需要开发人员指定他们想要允许的所有不同的扩展名。

请注意,这不是JS,而是typescript。如果你想在javascript文件中使用它,你必须省略类型定义(:file)。

4、所有跨浏览器图片类型

补充一点:如果你想包括所有具有最佳跨浏览器支持的现代图像文件类型,它应该是:

<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">

这允许在大多数浏览器中显示所有图像文件类型,同时排除TIFF等不太常见的格式或PSD等不适合网络的格式。

5、动态判断文件类型

你可以添加特定类型的图像或其他文件类型,并在代码中进行验证:

HTML

<input  style="margin-left: 10px; margin-top: 5px;" type="file" accept="image/x-png,image/jpeg,application/pdf"
                (change)="handleFileInput($event,'creditRatingFile')" name="creditRatingFile" id="creditRatingFile">

JavaScript

handleFileInput(event) {
    console.log(event);
    const file = event.target.files[0];
    if (file.size > 2097152) {
        throw err;
    } else if (
      file.type !== "application/pdf"  &&
      file.type !== "application/wps-office.pdf"   && 
      file.type !== 'application/pdf'  && file.type !== 'image/jpg'  && file.type !== 'image/jpeg'  && file.type !== "image/png"
    ) {
throw err;
    } else {
      
        console.log('file valid')
    }
}

6、ReactJS

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

总结

本文介绍了6种 <input type="file">文件选择器按钮只允许选择图片的方法,选择适合自己的方法,有的应用场景不一定需在服务器端再次验证。

相关文章

x
  • 站长推荐
/* 左侧显示文章内容目录 */