Client validation of INPUT of type FILE without postback using jQuery

Question

I want to check on the client side that a file has been selected before the form can be submitted.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("Upload", "Files", FormMethod.Post, new { enctype = "multipart/form-data" }))
        { 
            <input id="File" name="File" type="file" size="80" />
            <input type="submit" name="name" value="Upload" />    
        }

Currently this form is doing postbacks for validation. What is going wrong?

Brian · Accepted Answer · 2011-06-21 04:15:00Z

9

@xOn is right about not being able to modify the file element, but you should be able to validate it.

Here is a file element that uses unobtrusive validation to ensure the field has a value and the correct extension before submitting.

<input type="file" 
    id="myImg" 
    name="logo" 
    data-val="true" 
    data-val-required="Oops, select the logo first!"
    accept="jpg|jpeg"
    data-val-accept="Sorry, we only accept jpegs." />

edited Jun 21, 2011 at 4:15

answered Jun 21, 2011 at 4:00

Brian

38.2k24 gold badges100 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

x0n · Accepted Answer · 2011-01-02 05:45:18Z

3

An input of type "file" is a security-sensitive control and is not scriptable through the DOM. Imagine hitting a page, and that page sets the value of the control to a well-known location of a sensitive file and automatically submitting the form. The last time this control was scriptable would be about 1995 or 1996. That was a very silly time for internet security.

answered Jan 2, 2011 at 5:45

x0n

52.6k8 gold badges97 silver badges116 bronze badges

2 Comments

nick Over a year ago

Yes but usability wins (joke)

John Dyer Over a year ago

This is false. You can get the filename for a <input type="file" /> and see if it is blank or has a valid extension. You just can't set it or get the local path to the file.

AVSSM · Accepted Answer · 2017-01-05 17:09:49Z

0

<input type="file" name="path" required>

this works for me in html5

answered Jan 5, 2017 at 17:09

AVSSM

733 silver badges12 bronze badges

Collectives™ on Stack Overflow

Client validation of INPUT of type FILE without postback using jQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related