使用 HTML，如何限制可以上传的文件类型？
为了方便用户体验，我想将文件上传限制为仅图像（jpeg、gif、png）。
<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>
【问题讨论】：
标签： html image upload file-upload
已编辑
如果事情是他们应该的，你可以通过“接受”属性来做到这一点。
http://www.webmasterworld.com/forum21/6310.htm
然而，浏览器几乎忽略了这一点，所以这是无关紧要的。简短的回答是，我认为没有办法在 HTML 中做到这一点。您必须改为在服务器端检查它。
以下较早的帖子包含一些可以帮助您选择替代方案的信息。
【讨论】：
您只能在服务器端安全地执行此操作。使用“accept”属性很好，但也必须在服务器端进行验证，以免用户能够不受限制地 cURL 到您的脚本。
我建议您：丢弃所有非图像文件，警告用户，然后重新显示表单。
【讨论】：
最终，浏览窗口中显示的过滤器是由浏览器设置的。您可以在 Accept 属性中指定所需的所有过滤器，但不能保证用户的浏览器会遵守它。
最好的办法是在服务器的后端进行某种过滤。
【讨论】：
HTML5 表示<input type="file" accept="image/*">。当然，永远不要相信客户端验证：始终在服务器端再次检查...
【讨论】：
签出一个名为 Uploadify 的项目。 http://www.uploadify.com/
这是一个基于 Flash + jQuery 的文件上传器。这使用了 Flash 的文件选择对话框，它使您能够过滤文件类型、同时选择多个文件等。
【讨论】：
HTML5 文件输入有accept 属性和multiple 属性。通过使用多个属性，您可以在一个实例中上传多个图像。
<input type="file" multiple accept="image/*">
您还可以限制多种 mime 类型。
<input type="file" multiple accept="image/*,audio/*,video/*">
还有另一种使用文件对象检查 mime 类型的方法。
文件对象为您提供名称、大小和类型。
var files=e.target.files;
var mimeType=files[0].type; // You can get the mime type
您还可以通过上述代码限制用户上传某些文件类型。
【讨论】：
image/*|audio/*|video/* 对我不起作用，它似乎应该用逗号分隔：image/*,video/mp4,.txt
这是图片上传的 HTML。默认情况下，它只会在浏览窗口中显示图像文件，因为我们已经输入了accept="image/*"。但是我们仍然可以从下拉列表中更改它，它将显示所有文件。因此 Javascript 部分会验证所选文件是否为实际图像。
<div class="col-sm-8 img-upload-section">
<input name="image3" type="file" accept="image/*" id="menu_images"/>
<img id="menu_image" class="preview_img" />
<input type="submit" value="Submit" />
</div>
在更改事件中，我们首先检查图像的大小。在第二个if 条件中，我们检查它是否是一个图像文件。
如果不是图像文件，this.files[0].type.indexOf("image") 将是 -1。
document.getElementById("menu_images").onchange = function () {
var reader = new FileReader();
if(this.files[0].size>528385){
alert("Image Size should not be greater than 500Kb");
$("#menu_image").attr("src","blank");
$("#menu_image").hide();
$('#menu_images').wrap('<form>').closest('form').get(0).reset();
$('#menu_images').unwrap();
return false;
}
if(this.files[0].type.indexOf("image")==-1){
alert("Invalid Type");
$("#menu_image").attr("src","blank");
$("#menu_image").hide();
$('#menu_images').wrap('<form>').closest('form').get(0).reset();
$('#menu_images').unwrap();
return false;
}
reader.onload = function (e) {
// get loaded data and render thumbnail.
document.getElementById("menu_image").src = e.target.result;
$("#menu_image").show();
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
};
【讨论】：
<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>
现在在 html 部分
<input type="file" onchange="chng()">
此代码将检查上传的文件是否为jpg文件并限制其他类型的上传
【讨论】：
这是我一直使用成功的：
...
<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>
...
最好也检查服务器端的实际文件类型。
【讨论】：
因为<input type="file" id="fileId" accept="image/*"> 不能保证有人会选择图片，所以您需要像这样进行一些验证：
if(!(document.getElementById("fileId").files[0].type.match(/image.*/))){
alert('You can\'t upload this type of file.');
return;
}
【讨论】：