Question

我正在学习如何使用ajax上传文件的教程，我遇到了这行代码。

var fileToUpload = $('input[type="file"]')[0].files[0];
// I change it to this. And now its undefined.
var fileToUpload = $('input[type="file"]').files[0];

我真的很困惑选择输入类型文件与选择输入类型文本的区别。并且使用.val()与使用[0].files[0]相同？

Answer 1

两者都不同，因为第一个将从普通.file[0]调用node object，而第二个是在包装器.file[0]上调用jquery object。由于jquery对象不包含任何属性，如文件，第二个将抛出错误，如Uncaught TypeError: Cannot read property '0' of undefined(…)

同时.val()将返回节点对象的value属性，并且可以通过jquery对象而不是普通节点对象调用它。

如果你想检查Jquery可用的enumerable properties是什么，那么只需在你的控制台中执行以下命令。

var x = $();
Object.keys(x.__proto__)

Answer 2

并且使用.val()与使用[0].files[0]相同吗？

没有。 .files是input type="file"元素的方法属性，它返回FileList个对象。 .files不是jQuery方法。 .val()不会返回FileList个对象。

要使用jQuery检索FileList，您可以使用带有参数"files"的{{3}}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
  <script>
    $(document).ready(function() {
      $(":file").change(function() {
        console.log($(this).prop("files"))
      })
    })
  </script>
</head>
<body>
  <input type="file" />
</body>
</html>

如何选择输入类型=文件在jquery中工作

2 个答案: