Html 如何限制我的 input type="file" 只接受在 Firefox 中不起作用的 png 图像文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10381999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to restrict my input type="file" to accept only png image files not working in Firefox
提问by Yasser Shaikh
I am using input type="file", Now my requirement is that I only want to select png images, that is when I select browse a "png" filter should be applied.
我正在使用 input type="file"，现在我的要求是我只想选择 png 图像，也就是说，当我选择浏览时，应该应用“png”过滤器。
I have referred www.w3schools.com/tags/att_input_accept.aspand below is the code I am using, this works fine with Chrome but does not work with Firefox and IE.
我已经提到www.w3schools.com/tags/att_input_accept.asp，下面是我正在使用的代码，这适用于 Chrome，但不适用于 Firefox 和 IE。
Please can anyone help me understand what wrong I must be doing ?
请任何人都可以帮助我了解我必须做的错误吗？
<h2>Below uses accept="image/*"</h2>
<input type="file" name="pic1" accept="image/*" />
<h2>Below I need to accept only for png</h2>
<input type="file" name="pic1" accept="image/png" />
?Here is a fiddle link to it http://jsfiddle.net/Jcgja/2/
?这里是它的小提琴链接http://jsfiddle.net/Jcgja/2/
采纳答案by Yasir Mahmood
You need to validate it through java script. Below is the code for java script validation
您需要通过java脚本验证它。下面是java脚本验证的代码
function CheckFileName() {
var fileName = document.getElementById("uploadFile").value
if (fileName == "") {
alert("Browse to upload a valid File with png extension");
return false;
}
else if (fileName.split(".")[1].toUpperCase() == "PNG")
return true;
else {
alert("File with " + fileName.split(".")[1] + " is invalid. Upload a validfile with png extensions");
return false;
}
return true;
}
回答by Guffa
The browser support information on that page of w3schools is not correct.
w3schools 该页面上的浏览器支持信息不正确。
If you check this page, you see that the acceptattribute it's not implemented in Firefox:
如果您查看此页面，您会看到accept它未在 Firefox 中实现的属性：
https://developer.mozilla.org/en/HTML/Element/Input
https://developer.mozilla.org/en/HTML/Element/Input
Update:
The acceptattribute is now implemented in Firefox, but users who don't have a recent version still won't have the support.
更新：
该accept属性现已在 Firefox 中实现，但没有最新版本的用户仍然无法获得支持。
回答by Julien
As you can see, the 'accept' attribute is not properly supported by any of the major browsers. You could use a javascript validation on the form onsubmit event to verify if the file type is correct, returning false otherwise.
如您所见，任何主要浏览器都没有正确支持“accept”属性。您可以在表单 onsubmit 事件上使用 javascript 验证来验证文件类型是否正确，否则返回 false。
Do not use this attribute as a validation tool. File uploads should be validated on the server.
不要将此属性用作验证工具。应在服务器上验证文件上传。
回答by xRed
<?php
if ((($_FILES["pic1"]["type"] == "image/png")
{
if ($_FILES["pic1"]["error"] > 0)
{
echo "Error: " . $_FILES["pic1"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["pic1"]["name"] . "<br />";
echo "Type: " . $_FILES["pic1"]["type"] . "<br />";
echo "Size: " . ($_FILES["pic1"]["size"] / 1024) . " Kb<br />";
echo "Stored in: " . $_FILES["pic1"]["tmp_name"];
}
}
else
{
echo "Invalid file";
}
?>
This is just the validation of the type of file. Not the whole upload script.
这只是文件类型的验证。不是整个上传脚本。
回答by AJay Garg
you can use javascript function onChane event of a file function
您可以使用文件函数的 javascript 函数 onChane 事件
filesChange() {
checkFile();
}
<script type="text/javascript">
function checkFile() {
var fileElement = document.getElementById("uploadFile");
var fileExtension = "";
if (fileElement.value.lastIndexOf(".") > 0) {
fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
}
if (fileExtension == "gif") {
return true;
}
else {
alert("You must select a GIF file for upload");
return false;
}
}
回答by Rayjax
As pointed out in the comments, accepted solution won't work with a file name with several "." in it. This should handle it better, it is more bug-proof and flexible, and you can manage accepted extensions by editing the array.
正如评论中指出的那样，接受的解决方案不适用于带有多个“.”的文件名。在里面。这应该可以更好地处理它，它更防错和灵活，您可以通过编辑数组来管理接受的扩展。
function checkFileExtension() {
var fileName = document.getElementById("uploadFile").value;
if(!fileName)
return false;
var extension = fileName.split(".");
if(extension && extension.length > 1){
extension = [extension.length-1].toUpperCase();
if (["PNG"].indexOf(extension) != -1)
return true;
else{
alert("Browse to upload a valid File with png extension");
return false;
}
}
else{
alert("Browse to upload a valid File with png extension");
return false;
}
}
