Question

我正在使用jquery对html 5文件上传进行一些测试并遇到了一些奇怪的事情（至少对我而言）。我试图获取在文件控件中选择的文件列表：

<html><head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
    <input type="file" multiple="multiple" id="inputFile" name="inputFile">
    <button onclick="buttonClicked()" type="button">upload</button>
<script type="text/javascript">//<![CDATA[ 
function buttonClicked() {
    console.log($("#inputFile").val()); // depending on the browser, gives either the file name, either the full path, but only for the first file
    console.log($("#inputFile").files); // gives undefined
    console.log($("#inputFile").attr("files")); // gives undefined
    console.log($("#inputFile").get()); // according to the jquery documentation, give the dom element...
    console.log($("#inputFile").get().files); // ...but strangely, files is undefined
    console.log($("#inputFile")[0].files); // on the other hand, this gives me the list of files
}
//]]>;  
</script>
</body></html>

所以首先我期待$（“＃inputFile”）。val（）会给我最少，太糟糕的情况并非如此。所以我在input.files上尝试了各种变体，并没有真正期望它能够工作，因为它似乎不适合jquery对象（但是，嘿，你永远不知道）。所以我试图从jquery获取底层的dom元素来访问文件项。这就是它变得奇怪的地方，因为它也是未定义的。另一方面，$（“＃inputFile”）[0] .files给出了预期的结果。

[编辑] 然后，经常在输入这个问题时，我自己找到了解决方案。无论如何我会留在这里，所以任何挣扎的人都有机会解决它。它基本上用于RRTFM，如Really RTFM：

此调用返回所有匹配的DOM节点，包含在a中标准数组

这意味着，即使只有一个元素。所以电话：

console.log($("#inputFile").get());

返回一个包含一个元素的数组，当然数组没有files属性。应该是：

console.log($("#inputFile").get(0)); 
console.log($("#inputFile").get()[0]); // or this one, but that's a bit silly

Answer 1

问题是，除了.get()返回一个数组（.get(0)为您提供第一个元素）之外，您使用.attr()代替.prop()。

如果你想要elem.files，jQuery的访问方式是$(elem).prop('files')。

使用与.attr()通话相对应的.getAttribute()时，files或checked等属性通常不是您想要的。 jQuery有时会自动切换到属性，例如对于checked，但当然它不能涵盖每一个属性。

所以，您最终想要使用的是$('#inputFile').prop('files')或$("#inputFile").get(0).files。但是，如果您的选择器与任何选项都不匹配，后者将抛出错误。

为什么$（“＃element”）。get（）与$（“＃element”）[0]不同？

1 个答案: