HTML：如何将文件上传限制为仅图片？

使用HTML，我如何限制可以上传的文件类型？

为了简化用户体验，我希望将文件上传限制为仅图像（jpeg，gif，png）。

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

HTML5说<input type="file" accept="image/*">。当然，永远不要信任客户端验证：总是在服务器端再次检查...

HTML5文件输入具有接受属性，也具有多个属性。通过使用多个属性，您可以在一个实例中上传多个图像。

<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

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

已编辑

如果事情应该是这样，则可以通过“ Accept”属性来实现。

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

但是，浏览器几乎忽略了这一点，因此这是不相关的。简短的答案是，我认为没有办法在HTML中做到这一点。您必须改为在服务器端进行检查。

以下较早的帖子提供了一些信息，可以帮助您选择其他方法。

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

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

您只能在服务器端安全地执行此操作。使用“ accept”属性是好的，但是还必须在服务器端进行验证，以免用户可以使用cURL到您的脚本而不受此限制。

我建议您：丢弃任何非图像文件，警告用户，然后重新显示表单。

<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文件，并限制其他类型的上传

最终，显示在“浏览”窗口中的过滤器由浏览器设置。您可以在“接受”属性中指定所需的所有过滤器，但不能保证用户的浏览器将遵守该过滤器。

最好的选择是在服务器后端进行某种筛选。

检出一个名为Uploadify的项目。http://www.uploadify.com/

这是一个基于Flash + jQuery的文件上传器。这使用Flash的文件选择对话框，使您能够过滤文件类型，同时选择多个文件，等等。