Question

这里我有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>

Answer 1

您可以在输入标记

中使用accept属性

<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" />

<input type="file" accept="image/*">

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

请参阅此link

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

即可

<input type="file" multiple="multiple" name="File1" id="File1" accept="image/*" />

如何验证只接受（任何）图像类型文件的表单？

1 个答案: