在HTML中，accept属性用于指定文件上传的MIME类型，当用户尝试上传文件时，浏览器会检查文件的MIME类型是否与accept属性的值匹配，如果不匹配，文件将不会被接受。
（图片来源网络，侵删）
你可能已经注意到了，当你在Firefox浏览器中使用accept=”image/png”时，它并不总是按照你期望的方式工作，这是因为Firefox有一个特殊的安全机制，它会阻止某些类型的文件被上传，即使accept属性允许这些文件。
为了解决这个问题，你需要使用JavaScript来动态地修改accept属性的值，这样，你可以根据用户的选择来调整接受的文件类型，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>File Upload with Accept</title>
<script>
function changeAccept() {
var input = document.getElementById("fileInput");
input.setAttribute("accept", "image/png");
}
</script>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/formdata">
<input type="file" id="fileInput" name="file" accept="">
<button type="button" onclick="changeAccept()">Accept PNG</button>
<button type="submit">Upload</button>
</form>
</body>
</html>
在这个示例中，我们创建了一个文件输入框和一个按钮，当用户点击按钮时，changeAccept函数会被调用，它会修改文件输入框的accept属性值为image/png，用户可以选择一个PNG文件并提交表单。
需要注意的是，这种方法仍然无法解决Firefox的所有限制，Firefox不允许用户上传大于5MB的文件，无论accept属性如何设置，Firefox还禁止了一些其他类型的文件，如可执行文件、脚本文件等。
如果你需要更高级的文件上传功能，建议使用服务器端编程语言（如PHP、Python、Node.js等）来处理文件上传，这样，你可以完全控制文件的类型、大小和格式，而不受浏览器的限制，以下是一个简单的PHP文件上传示例：
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
$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;
}
}
?>
在这个示例中，我们首先检查上传的文件是否为图像，如果是图像，我们将允许文件上传；否则，我们将拒绝文件上传，这样，我们可以确保只允许用户上传图像文件，而不受浏览器的限制。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477691.html
微信扫一扫