Html 将文件上载类型限制为仅图像

我正在使用HTML表单上传图像文件。现在我使用服务器端验证来允许文件类型。但我也想在客户端验证它。我在一些网站上看到，当我们选择文件时，其他文件类型会变灰。我认为这是一个很酷的选择。当我浏览谷歌时，我发现了这个

<input id="my_file_element" type="file" name="file_0" accept="image/*">

但有了这个选项，我就可以获得所有文件选项，这样我也可以启用其他文件。我不需要那个。无论发生什么情况，都应允许用户仅从其计算机中选择图像文件。你们知道怎么做吗

这就是我说的变灰的意思。

此接受属性是HTML5的一项功能，因此许多浏览器都不支持它

---

恐怕，只要我还记得，唯一能得到更好的文件上传对话框的方法就是文件类型过滤器，多个文件。。。就是使用Flash对象。

我在Firefox中试用过，它在Firefox中工作正常。您使用的浏览器是什么？您可以使用javascript检查文件表单上的扩展名。我会给你一些代码，但我不擅长javascript。如果你愿意的话，也许jQuery可以用。@dotweb:我在用谷歌浏览器。。在firefox中，你可以使用“所有文件”选项并选择其他文件吗？@Different55我使用的是javascript或jQuery，我可以阻止用户单击非图像文件吗？？因为那是我想要的。。打开文件选择器时，非图像文件应变灰！！是的，我可以选择图像文件和所有文件。你能检查我的编辑吗？？我上传了一张它应该是什么样子的图片。我认为他们没有在这里使用flash，因为界面来自MAC，而不是flash。我是rite吗？尽管此代码可能有助于解决此问题，但提供有关为什么和/或如何回答此问题的附加上下文将显著提高其长期价值。请在您的回答中添加一些解释。

Here is the HTML for image upload, By default it will show image files only in browsing window becauase we have put accept="image/*" . But still we can change it from the dropdown and it will show all files. So the Javascript part validates whether the selected file is an actual image or not.

 <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> 

Here on the change event first we are checking the size of the image. And in the second if condition we are checking whether it is an image file or not.
this.files[0].type.indexOf("image") will be "-1" if it is not an image file.

    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]);
    };