26

我有一个带有单个文件上传输入的简单 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，如果可能的话，我更愿意在这里使用它。

4

4 回答 4

59

您必须访问该元素。尝试：

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

或（谢谢杰克）

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

小提琴

于 2012-12-06T16:20:34.647 回答
4

试试下面的代码

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

谢谢

于 2012-12-06T16:23:32.120 回答
3

jQuery 没有为 Files API 提供包装器。所以没有 jQuery 风格的方式来做到这一点，至少没有内置到 jQuery 核心中。

您的选择：

  • 坚持选项A
  • 等待 jQuery 包含这样的包装器（他们可能不会）
  • 查找其他人编写的扩展名（如果存在）
  • 自己写一个扩展
于 2012-12-06T16:21:45.470 回答
0 
$(function () {
    $("#cmdSubmit").bind("click", function () {
       alert(this.files);
     });        
});​
于 2012-12-06T16:21:06.813 回答