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

Question

Here i have demo.jsp page where i'm uploading the image for this i have written javascript validation code for jpg,png and gif but if image type is other than that we cant write for every type in conditon so is there any alternate method to do this?

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

validation of image file goes far beyond validating the extension. — Ryan, Jun 25 '14 at 04:23

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

you can have an accept attribute in the input tag

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

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

the first one works for chrome ,whereas the second one works for chrome and FF

refer to this link

To create a file input box that allows with multiple file support you can simply do

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

edited May 23 '17 at 10:26

Community

1
1

answered Jun 25 '14 at 04:03

pradnyapalan

50
6

if image other than png,gif,jpeg then? – tajMahal Jun 25 '14 at 04:04
in jsp ,what can i write in js? – tajMahal Jun 25 '14 at 04:07
Could you please change my code,i'm little bit confusing – tajMahal Jun 25 '14 at 04:11
if we have written accept="image/*" then in js it will check only whether jpg,png ,gif else it will show upload correct image right?if i have uploaded bmp format then it shows wrong ? – tajMahal Jun 25 '14 at 04:23
if you give accpet="image/*" ,it will accept even the bmp format images. have a look at the MIME type available for the images,as well as this [link](http://weblog.west-wind.com/posts/2012/Mar/06/Using-the-HTML5-input-typefile-multiplemultiple-Tag-in-ASPNET) you will have a clear idea – pradnyapalan Jun 25 '14 at 04:36

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

1 Answers1