提问人：kbvishnu 提问时间：9/30/2010 最后编辑：shA.tkbvishnu 更新时间：9/29/2023 访问量：1038915
如何允许<input type=“file”>只接受图像文件？
How to allow <input type="file"> to accept only image files?
问：
我只需要通过标签上传图像文件。<input type="file">
目前，它接受所有文件类型。但是，我想将其限制为仅特定的图像文件扩展名，包括 、 等。.jpg.gif
如何实现此功能？
答：
1624赞
madcap laughs
6/3/2011
#1
使用输入标记的 accept 属性。要仅接受 PNG、JPEG 和 GIF，您可以使用以下代码：
<label>Your Image File
<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>或者简单地说：
<label>Your Image File
<input type="file" name="myImage" accept="image/*" />
</label>请注意，这仅向浏览器提供提示，告知要向用户显示哪些文件类型，但这很容易规避，因此您还应该始终在服务器上验证上传的文件。
它应该可以在 IE 10+、Chrome、Firefox、Safari 6+、Opera 15+ 中使用，但在移动设备上的支持非常粗略（截至 2015 年），根据一些报告，这实际上可能会阻止某些移动浏览器上传任何内容，因此请务必测试好您的目标平台。
有关详细的浏览器支持，请参阅 http://caniuse.com/#feat=input-file-accept
评论
0赞
KNU
4/22/2014
@madcap有效？？accept="file/csv, file/xls"
24赞
Micros
8/27/2015
你确定是吗？根据这个列表，它只是.iana.org/assignments/media-types/media-types.xhtmlimage/x-pngimage/png
4赞
Diego
10/16/2016
当答案是答案时，它可能有效，但只是尝试了一下，对 FF 不起作用。我只需要添加accept=“.png，.jpg，.jpeg”，例如：jsfiddle.net/DiegoTc/qjsv8ay9/4
6赞
3/9/2018
不要完全依赖它。它也可以轻松接受其他文件。您只需要更改打开文件窗口中允许的文件类型。
2赞
Jarrod McGuire
9/14/2021
我为 png 添加了建议的选项。jpeg 和 gif，但现在 Chrome“打开文件”对话框显示“自定义文件（*.png;*.jfif;*.pjpeg;*.jpeg;*.pjp;*.jpg）“，当我没有添加一半的扩展名时。我意识到它们大多是相同的，但服务器不接受这些选项，我想让用户保持简单。有人知道这是怎么回事吗？
221赞
Tyilo
4/7/2013
#2
使用这个：
<input type="file" accept="image/*">
适用于 FF 和 Chrome。
评论
29赞
TlonXP
3/24/2015
accept 属性不是验证工具，所有上传都应在服务器上进行验证，始终...
1赞
mcy
3/14/2016
原生 Android 浏览器仍然不支持，但我想在其他浏览器上运行良好 caniuse.com/#feat=input-file-accept
0赞
hardsetting
1/12/2018
我喜欢这个解决方案，因为在文件提示符中，类型下拉列表显示“图像文件”。
3赞
stephenmurdoch
5/20/2018
请注意这一点，因为它允许 SVG，您可能不想要。
0赞
Thamarai T
3/29/2019
这将允许最大的图像文件 .png、.jpg、.jpeg、.gif、.bmp、.ico、.tiff、.svg、.ai、.psp、.pcd、.pct、.raw。因此，最好特别提及类型。
110赞
Er. Mohit Agrawal
8/26/2015
#3
像这样使用它
<input type="file" accept=".png, .jpg, .jpeg" />
它对我有用
https://jsfiddle.net/ermagrawal/5u4ftp3k/
评论
0赞
user3160227
6/2/2019
这不适用于 iOS 12。用户仍然可以在设备中选择视频。
0赞
Antonio Ooi
10/17/2022
这至少适用于 Google Chrome（其他尚未测试的 Web 浏览器）。如果您使用 ，Chrome 仍会显示所有图片类型供用户选择。请参阅 Mozilla 文档。accept="image/png, image/gif, image/jpeg"
6赞
yussan
9/29/2015
#4
您可以使用属性来阅读此文档 http://www.w3schools.com/tags/att_input_accept.aspaccept<input type="file">
31赞
Ashok Devatwal
8/10/2016
#5
这可以通过以下方式实现
<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
56赞
Surya Kameswara Rao Ravi
6/4/2017
#6
步骤：
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。
- 因此，您必须在服务器端编写文件内容验证。
评论
3赞
paranoidhominid
8/2/2018
最完整的答案
0赞
stickyuser
4/29/2023
太好了，这就是我一直在找的。当显示警报时，我清除输入字段值，如下所示：document.getElementById("fileName").value = "";
16赞
Mati Cassanelli
10/3/2019
#7
使用 type=“file” 和 accept=“image/*”（或所需的格式），允许用户选择具有特定格式的文件。但是您必须在客户端再次重新检查它，因为用户可以选择其他类型的文件。 这对我有用。
<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />
然后，在你的 javascript 脚本中
processFile(imageInput) {
if (imageInput.files[0]) {
const file: File = imageInput.files[0];
var pattern = /image-*/;
if (!file.type.match(pattern)) {
alert('Invalid format');
return;
}
// here you can do whatever you want with your image. Now you are sure that it is an image
}
}
评论
0赞
Adam Marshall
12/20/2019
这是最好的答案，因为它将检查文件是否真的是图像，而无需开发人员指定他们想要允许的所有不同扩展名
0赞
Ivan P.
4/3/2020
我明白你的想法。这是有效的 JS 语法吗：？此外，将 id 分配给输入不是以传统方式完成的。const file: File = imageInput.files[0];
0赞
Mati Cassanelli
4/4/2020
事实上，不是JS，而是打字稿。块代码是从 Angular 项目复制的。如果要在 javascript 文件中使用它，则必须省略类型定义 （：File）
0赞
Julio Spinelli
1/12/2022
它不起作用，因为 file.type 是使用文件扩展名获取的！您需要使用如下代码来执行客户端验证： github.com/spine001/client-side-validation-of-file-type
0赞
stomtech
5/10/2023
模式不应该是吗？这将检查“item/”后面是否有字符。var pattern = /image\/\w*/;
2赞
GorvGoyl
2/3/2020
#8
如果要一次上传多张图片，可以在输入中添加属性。multiple
upload multiple files: <input type="file" multiple accept='image/*'>
1赞
Balaji
7/21/2020
#9
简单而强大的方式（动态接受）
将格式放在数组中，例如“image/*”
var upload=document.getElementById("upload");
var array=["video/mp4","image/png"];
upload.accept=array;
upload.addEventListener("change",()=>{
console.log(upload.value)
})<input type="file" id="upload" >
7赞
Flash Noob
9/16/2020
#10
您可以添加特定类型的图像或其他文件类型，并在代码中进行验证：
function handleFileInput(e) {
const [ file ] = e.target.files
if (!file) return
const { size, type } = file
if (size > 2097152) {
throw "too big"
} else if (
type !== "application/pdf" && type !== "application/wps-office.pdf" &&
type !== "image/jpg" && type !== "image/jpeg" && type !== "image/png"
) {
throw "not the right type"
} else {
console.log("file valid")
}
}<input type="file" accept="image/x-png,image/jpeg,application/pdf" onchange="handleFileInput(event)" />
3赞
Irfan wani
11/1/2020
#11
在html中;
<input type="file" accept="image/*">
这将接受所有图像格式，但不接受其他文件，如 pdf 或视频。
但是如果你使用的是 django，在 django forms.py;
image_field = forms.ImageField(Here_are_the_parameters)
评论
1赞
MattoMK
12/2/2021
accept=“image/*” 将不起作用。它只是过滤浏览器对话框以仅显示图像文件，但没有什么能阻止您在下拉列表中选择“所有文件”并上传 pdf（或任何其他文件）。我认为您需要以类似于上面 Mati Cassanalli 的方式验证它
1赞
wongz
6/10/2021
#12
其他人的答案为 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;
14赞
Ood
4/7/2022
#13
补充一下：如果您想包含所有具有最佳跨浏览器支持的现代图像文件类型，它应该是：
<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">
这允许可以在大多数浏览器中显示的所有图像文件类型，同时排除不太常见的格式（如 TIFF）或不适合 Web 的格式（如 PSD）。
评论