HTML:如何限制文件上传仅限于图片？
HTML:如何限制文件上传仅限于图片？
提问于 2009-10-13 17:49:02
使用HTML，我如何限制可以上传的文件类型？
为了方便用户体验，我想限制文件上传仅限于图片(jpeg，gif，png)。
<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>回答 8
Stack Overflow用户
发布于 2009-10-13 19:32:23
HTML5说是<input type="file" accept="image/*">。当然，永远不要相信客户端验证:总是在服务器端再次检查...
Stack Overflow用户
发布于 2012-06-16 18:47:06
HTML5文件输入具有accept属性和多个属性。通过使用多个属性，可以在一个实例中上传多个镜像。
<input type="file" multiple accept="image/*">您还可以限制多个mime类型。
<input type="file" multiple accept="image/*,audio/*,video/*">以及使用文件对象检查mime类型的另一种方式。
file对象提供了名称、大小和类型。
var files=e.target.files;
var mimeType=files[0].type; // You can get the mime type您还可以通过上面的代码限制某些文件类型的用户上传。
Stack Overflow用户
发布于 2016-06-28 22:21:25
这是用于上传图像的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> 在这里的change事件中，我们首先检查图像的大小。在第二个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]);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1561847
复制相关文章
相似问题