我正在使用输入类型=“文件”,现在我的要求是我只想选择png图像,即当我选择浏览时应该应用“png”过滤器。
我已提及www.w3schools.com/tags/att_input_accept.asp
以下是我正在使用的代码,这适用于Chrome,但不适用于Firefox和IE。
请有人帮我理解我必须做的错误吗?
<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" />
这是一个小提琴链接http://jsfiddle.net/Jcgja/2/
答案 0 :(得分:21)
您需要通过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;
}
答案 1 :(得分:6)
w3schools页面上的浏览器支持信息不正确。
如果您查看此页面,则会看到Firefox中未实现的accept
属性:
https://developer.mozilla.org/en/HTML/Element/Input
更新:
accept
属性现在已在Firefox中实现,但没有最新版本的用户仍然无法获得支持。
答案 2 :(得分:1)
如您所见,任何主流浏览器都不支持'accept'属性。您可以在onsubmit事件表单上使用javascript验证来验证文件类型是否正确,否则返回false。
请勿将此属性用作验证工具。应在服务器上验证文件上传。
答案 3 :(得分:1)
<?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";
}
?>
这只是文件类型的验证。不是整个上传脚本。
答案 4 :(得分:0)
你可以使用javascript函数onChange事件的文件函数
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;
}
}
答案 5 :(得分:0)
正如评论中所指出的那样,已接受的解决方案不会使用多个&#34;的文件名。&#34;在里面。这应该更好地处理它,它更具有防错和灵活性,并且您可以通过编辑数组来管理已接受的扩展。
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;
}
}