HTML:如何将文件上传限制为仅图像？

Question

使用HTML,如何限制可以上传哪种文件类型？

为了方便用户体验,我想将文件上传限制为仅图像(jpeg,gif,png).

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

Answer 1

HTML5说<input type="file" accept="image/*">.当然,永远不要相信客户端验证:始终在服务器端再次检查...

Answer 2

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

您还可以通过上述代码限制用户上传某些文件类型.

Answer 3

编辑

如果事情就像他们应该的那样,你可以通过"接受"属性来做到这一点.

http://www.webmasterworld.com/forum21/6310.htm

但是,浏览器几乎忽略了这一点,所以这是无关紧要的.简短的回答是,我认为没有办法在HTML中实现它.你必须在服务器端检查它.

以下较旧的帖子提供了一些可以帮助您选择的信息.

文件输入'accept'属性 - 它有用吗？

Answer 4

这是用于图像上传的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]);
};