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.
I have referred www.w3schools.com/tags/att_input_accept.asp
and below is the code I am using, this works fine with Chrome but does not work with Firefox and 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/
Using type="file" and accept="image/*" (or the format you want), allow the user to chose a file with specific format.
The accept attribute specifies a filter for what file types the user can pick from the file input dialog box.
The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!
You need to validate it through java script. Below is the code for java script validation
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;
}
The browser support information on that page of w3schools is not correct.
If you check this page, you see that the accept
attribute it's not implemented in Firefox:
https://developer.mozilla.org/en/HTML/Element/Input
Update:
The accept
attribute is now implemented in Firefox, but users who don't have a recent version still won't have the support.
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.
Do not use this attribute as a validation tool. File uploads should be validated on the server.
<?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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With