With HTML, how do I limit what kind of filetypes can be uploaded?
To easy the user experience, I want to limit file uploads to be only images (jpeg, gif, png).
<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>
This is what I have been using successfully:
...
<div class="custom-file">
<input type="file" class="custom-file-input image-gallery" id="image-gallery" name="image-gallery[]" multiple accept="image/*">
<label class="custom-file-label" for="image-gallery">Upload Image(s)</label>
</div>
...
It is always a good idea to check for the actual file type on the server-side as well.
<script>
function chng()
{
var typ=document.getElementById("fiile").value;
var res = typ.match(".jp");
if(res)
{
alert("sucess");
}
else
{
alert("Sorry only jpeg images are accepted");
document.getElementById("fiile").value="; //clear the uploaded file
}
}
</script>
Now in the html part
<input type="file" onchange="chng()">
this code will check if the uploaded file is a jpg file or not and restricts the upload of other types
Because <input type="file" id="fileId" accept="image/*"> can't guarantee that someone will choose an image, you need some validation like this:
if(!(document.getElementById("fileId").files[0].type.match(/image.*/))){
alert('You can\'t upload this type of file.');
return;
}