Question

如何将以下代码编写为jquery：

var imagefile = document.getElementsByClassName("fileImage");
var filename = imagefile.files[0];

我在下面尝试了这个，但它说它没有定义，即使我已经声明文件输入的类是'fileImage'。

var filename = $('.fileImage').files[0];

Answer 1

您无法直接执行imagefile.files[0]

document.getElementsByClassName("fileImage")
//and
$('.fileImage')

返回“类似数组”的项目列表。（AFAIK，getElementsBy*函数，getElementsById除外，返回NodeList）

在获得files[0]之前，您需要首先迭代它们。

用于纯JS方法：

for(var i=0; i < imagefile.length;i++){
    var imgfile = imagefile[i];

    //now imgfile is the DOM element itself
    imgfile.files[0];
}

对于jQuery，你可以链接.each()

$('.fileImage').each(function(){

   //"this" in here is the DOM element

   this.files[0];

})

Answer 2

$（）函数返回的jQuery对象没有.files属性 - 该属性属于DOM元素。试试这个：

var filename = $('.fileImage')[0].files[0];

如果没有元素与选择器匹配，这仍然会出错，否则它会使用jQuery对象上的square-bracket数组语法来获取对第一个匹配元素的引用。

如果要测试与选择器匹配的元素是否使用jQuery对象.length属性：

var $files = $('.fileImage'),
    filename;
if ($files.length > 0) {
   filename = $files[0].files[0];
   // do something with filename...
}

Answer 3

因为.files[]不是jQuery的一部分。