jQuery :file Selector

What Is :file?

:file (since jQuery 1.0) selects <input type="file"> elements — the upload control. Official docs: it is equivalent to [type="file"]. Prefer $("input:file") over bare $(":file").

$("input:file")              // recommended
$("form input:file")         // scoped to a form
$("input[type=file]")        // same matches · faster (native CSS)

$(":file")                   // avoid — implies *:file

// Official idea: count file inputs in a form
$("input:file").length

How to Use :file

Prefix with input (or a form scope), then count, style, or listen for changes.

1. Prefer $("input:file") or $("#form input:file") over bare $(":file").
2. For modern speed, use $("input[type=file]") — same matches, native CSS.
3. Count with .length (official demo pattern).
4. Listen with .on("change", …) and read this.files.
5. Prevent accidental submits in demos with event.preventDefault() on the form.

Pseudocode

matches = []
for each element in search context:
    if element is an INPUT
       and element.type === "file":
        matches.add(element)

return matches

// Same idea as CSS: input[type="file"]

Cheat Sheet

Keep these facts handy while selecting file inputs.

Live Preview

Count file inputs in a mixed form — same idea as the official demo.

Ready — click Run to count file inputs.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

var n = $("input:file").length;
$("#out").text("For this type jQuery found " + n + ".");
$("form").on("submit", function (event) {
  event.preventDefault();
});

For this type jQuery found 1.

$("#out").text(
  ":file → " + $("input:file").length + "\n" +
  "[type=file] → " + $("input[type=file]").length
);

:file → 2
[type=file] → 2

$("#out").text(
  "Inside #upload: " + $("#upload input:file").length + "\n" +
  "Whole page: " + $("input:file").length
);

Inside #upload: 1
Whole page: 2

$("input:file").on("change", function () {
  var f = this.files && this.files[0];
  $("#out").text(f ? "Selected: " + f.name : "No file");
});
$("#out").text("Choose a file…");

Choose a file…
(after pick) Selected: photo.png

var names = $("input:file").map(function () {
  return this.name || "(unnamed)";
}).get();
$("#out").text(names.join("\n"));

photo
resume

Performance Notes

Because :file is a jQuery extension, prefer the attribute selector when performance matters. On small forms the difference is tiny — clarity and scoping matter more.

Key Takeaways