jQuery :file Selector

What You’ll Learn

The :file selector matches every input element with type="file" — the upload control in HTML forms. It is a jQuery form pseudo-class since 1.0, equivalent to [type="file"].

Introduction

File inputs power uploads — profile photos, document attachments, CSV imports. When a form mixes text fields, checkboxes, and file pickers, you need a selector that targets only the upload controls.

jQuery’s :file pseudo-class selects all elements of type file — in practice, every <input type="file">. It has existed since jQuery 1.0 and is equivalent to $("[type=file]"). Official docs recommend input:file rather than bare :file, which implies *:file.

Understanding the :file Selector

Think of :file as a shortcut for “every file upload input in this scope.” It filters by the HTML type attribute — nothing else.

• <input type="file"> → matches.
• <input type="file" accept="image/*"> → matches (accept does not affect selector).
• <input type="text"> → no match.
• <input type="checkbox"> → no match (use :checkbox).
• <button> → no match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "input:file" )

// scoped (recommended):
$( "form input:file" )
$( "#uploadForm input:file" )

// CSS equivalent (faster in modern browsers):
$( 'input[type="file"]' )

Parameters

• No arguments — the pseudo-class matches by input type attribute.

Return value

• A jQuery object containing every file input in the search context.
• Empty collection when no file inputs exist.

Official jQuery API example

var input = $( "input:file" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );

Examples Gallery

Example 1 follows the official jQuery input:file demo. Examples 2–5 compare with attribute selectors, count scoped uploads, handle the change event, and use the native performance pattern.

var input = $( "input:file" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" ).text( "For this type jQuery found " + input.length + "." );

File inputs → yellow bg + red border
Message → "For this type jQuery found 2." (two file inputs)

console.log( ":file →", $( "input:file" ).length );
console.log( "[type=file] →", $( 'input[type="file"]' ).length );

:file → 2
[type=file] → 2 (same matched set)

var n = $( "#uploadForm input:file" ).length;
$( "#fileCount" ).text( n + " file input(s) in the form" );

2 file inputs in form → "2 file input(s) in the form"
Standalone file input outside form → not counted

$( "input:file" ).on( "change", function() {
  var name = this.files.length ? this.files[0].name : "none";
  $( "#status" ).text( "Selected: " + name );
});

User picks document.pdf → "Selected: document.pdf"
Before selection → "No file selected"

$( 'input[type="file"]' ).addClass( "picked" );

// Equivalent to input:file — better for browser optimization

Both .upload file inputs → picked outline class
Browser can use querySelectorAll for first step

🚀 Common Use Cases

• Upload forms — style or validate all input:file fields.
• Multi-file widgets — count file inputs before submit.
• Filename preview — bind change on selected file inputs.
• Custom upload UI — hide native input, trigger click via jQuery.
• Form reset — clear file inputs with .val("") on the matched set.
• Accept filters — combine with [accept] for image-only pickers.

📝 Notes

• Available since jQuery 1.0 — selects input[type=file] only.
• Equivalent to [type="file"] — official jQuery documentation.
• Prefer input:file over bare $(":file") (implies *:file).
• Not valid in native querySelectorAll(":file") — use attribute selector instead.
• accept, multiple, and capture attributes do not change whether :file matches.
• Security: browsers restrict reading file paths — use the files API after selection.

💡 Best Practices