如何验证只接受(任何)图像类型文件的表单

How to validate form which accepts only (any)image type files?

本文关键字：类型 图像 表单 任何 文件 何验证 验证      更新时间：2023-09-26

这里我有demo.jsp页面，我在这里上传图像，我已经为jpg,png和gif编写了javascript验证代码，但如果图像类型是其他的，我们不能为每一种类型的条件，所以有没有其他方法来做到这一点?

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ImageResizing</title>
    <script>
        function  vlidate() {
            var fileName = document.getElementById("Imgfile").value;
            var file_extension = fileName.split('.').pop();
            var newWidth = document.getElementById("newWidth").value;
            var newHeight = document.getElementById("newHeight").value;
            //alert(fileName);
            //alert(file_extension);                
            if (file_extension !== "jpg" || file_extension !== "png" || file_extension !== "gif") {
                alert("Choose Valid image");
            }
            else if ((file_extension == "jpg" || file_extension == "png" || file_extension == "gif") && (newWidth.length != "" && newHeight.length != "")) {
                //alert("Go ahead");
                document.getElementById("uploadImgForm").submit();
            }
        }
    </script>
</head>
<body bgcolor="#ABD3EB">
    <%
        out.println("<form method='post' action='FileUploadServlet' enctype='multipart/form-data' id='uploadImgForm' name='uploadImgForm'>");
        out.println("<h2>Image Resizing</h2>");
        out.println("<table>");
        out.println("<tr><td><input type='file' id='Imgfile' name='Imgfile'></td></tr>");
        out.println("<tr><td></td></tr>");
        out.println("<tr><td>New Width:</td><td><input type='text'  id='newWidth' name='newWidth'</td></tr>");
        out.println("<tr><td>New Height:</td><td><input type='text' id='newHeight' name='newHeight'</td></tr>");
        out.println("<tr><td></td></tr>");
        out.println("<tr><td><input type='button' value='Upload Image' onclick='vlidate()' ></td></tr>");
        //out.println("<tr><td><input type='submit' value='Upload Image' ></td></tr>");
        out.println("</table>");
        out.println("</form>");
    %>
</body>

您可以在输入标签

中添加accept属性
<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" />
<input type="file" accept="image/*">

第一个适用于chrome，而第二个适用于chrome和FF

请参阅此链接

要创建一个允许多个文件支持的文件输入框，只需执行

<input type="file" multiple="multiple" name="File1" id="File1" accept="image/*" />
相关文章：