jQuery中的input.files等效方法

Question

我有一个简单的HTML表单，只有一个文件上传输入框。 (jsfiddle)

过去，我使用input.files访问用户选择的文件，但是我不知道如何在JQuery中实现这个功能；

代码：

$(function () {
    $("#cmdSubmit").bind("click", function () {
        var file = document.getElementById("fileInput").files[0];
        alert(file); //A

        file = $("#fileInput").val();
        alert(file); //B

        file = $("#fileInput").files[0];
        alert(file); //C

    });        
});​

选项A返回我期望的文件对象，但是选项B只给出上传文件的名称，至少目前看起来是这样，没有获取到文件本身。

选项C显示files未定义。

JQuery中与input.files等效的是什么？

注意：我不反对使用原生JavaScript；但考虑到我在项目其余部分中都在使用JQuery，如果可能的话我更愿意在这里也使用它。

- Mansfield

Answer 1

您需要访问该元素。尝试使用以下代码：

file = $("#fileInput")[0].files[0];
alert(file); //C

或者（感谢Jack）

file = $("#fileInput").prop('files')[0];
alert(file);

Fiddle

- Stefan

---

.prop('files')[0]比.attr('file')更可能有效。 - Ja͢ck

Answer 2

尝试以下代码。

var file = $("#fileInput").get(0).files[0];
 alert(file);

谢谢

- Sridhar Narasimhan

---

这看起来符合要求：https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/常见问题解答只是提到这样做会更慢...为什么要踩我？ - Andz

Answer 3

jQuery没有为Files API提供包装器。因此，至少在jQuery核心中没有内置的jQuery样式方法来执行此操作。

您的选择：

• 坚持选项A
• 等待jQuery包含这样的包装器（他们可能不会）
• 查找其他人编写的扩展程序（如果存在）
• 自己编写扩展程序

- Quentin

Answer 4

$(function () {
    $("#cmdSubmit").bind("click", function () {
       alert(this.files);
     });        
});​

- arhea