如何允许 <input type="file"> 只接受图像文件？
我只需要通过 <input type="file"> 标签上传图片文件。
现在，它接受所有文件类型。但是，我想将其限制为仅包含 .jpg、.gif 等的特定图像文件扩展名。
我怎样才能实现这个功能？
使用输入标签的接受属性。要仅接受 PNG、JPEG 和 GIF，您可以使用以下代码：
或者简单地说：
请注意，这仅向浏览器提供关于向用户显示哪些文件类型的提示，但这很容易绕过，因此您也应该始终在服务器上验证上传的文件。
它应该可以在 IE 10+、Chrome、Firefox、Safari 6+、Opera 15+ 中运行，但在手机上的支持非常粗略（截至 2015 年），根据一些报告，这实际上可能会阻止某些手机浏览器上传任何内容，所以一定要好好测试你的目标平台。
有关浏览器支持的详细信息，请参阅 http://caniuse.com/#feat=input-file-accept
使用这个：
<input type="file" accept="image/*">
适用于 FF 和 Chrome。
像这样使用它
<input type="file" accept=".png, .jpg, .jpeg" />
它对我有用
https://jsfiddle.net/ermagrawal/5u4ftp3k/
步骤： 1. 将接受属性添加到输入标签 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>
解释：
接受属性过滤将在文件选择器弹出窗口中显示的文件。但是，这不是验证。这只是对浏览器的提示。用户仍然可以更改弹出窗口中的选项。 javascript 仅验证文件扩展名，但无法真正验证选择文件是实际的 jpg 还是 png。因此，您必须在服务器端编写文件内容验证。
这可以通过
<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
使用 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
}
}
const file: File = imageInput.files[0]; 吗？此外，没有以传统方式将 id 分配给输入。
作为补充：如果您想包含具有最佳跨浏览器支持的 all modern image file types，它应该是：
<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">
这允许可以在大多数浏览器中显示的所有图像文件类型，同时排除不太常见的格式（如 TIFF）或不适合 Web 的格式（如 PSD）。
您可以添加特定类型的图像或其他文件类型并在代码中进行验证：
<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">
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')
}
}
在html中；
<input type="file" accept="image/*">
这将接受所有图像格式，但不接受 pdf 或视频等其他文件。
但是如果你使用 django，在 django forms.py 中；
image_field = forms.ImageField(Here_are_the_parameters)
如果您想一次上传多张图片，您可以在输入中添加 multiple 属性。
上传多个文件：
简单而强大的方式（动态接受）
将格式放在数组中，如“image/*”
var upload=document.getElementById("upload"); var array=["video/mp4","image/png"];上传.接受=数组； upload.addEventListener("change",()=>{ console.log(upload.value) })
其他人的答案为 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;
accept="file/csv, file/xls"有效吗？image/x-png吗？根据这个列表，它只是image/png。 iana.org/assignments/media-types/media-types.xhtml