jquery - 使用 Jquery 访问多个文件

标签 jquery jquery-ui

我正在使用 HTML 5 多文件功能来选择多个文件进行上传。这些文件作为 $_FILES 变量中的文件数组出现。我想使用 jQuery 获取单击上传按钮之前列出的所有文件的名称。

<input class="pictures-upload" name="multiplePhotos[]" type="file" multiple="multiple" />

我想附加一个 onchange 事件,当一个人单击上传文件并选择多个文件时,它将获取所有文件的名称并将其附加到 html 正文中。我正在使用

$('.upload_button').live('change', function () {
     var li = $('<li />').text($(this).val()),
     $('#body').append(li);

 });

这只需要选择最后一个文件。如何获取所有文件?

最佳答案

输入元素具有"file" native 属性,即 FileList类型(即 File 的序列)。如果您查看 File 的 W3 规范元素,您将发现可以访问哪些属性。

但是,长话短说,jQuery val方法不会返回你想要的。由于“files”是输入元素的 native 属性,因此您可以使用 this.files 直接访问它。然后只需迭代数组即可获取 File 对象,您可以获取该对象的信息(名称、大小、类型等)。

for (var i = 0; i < this.files.length; i++) {
    var file = this.files[i];
    $fileList.append('<li>' + file.name + '</li>');
}

在这里查找它的 jsFiddle:http://jsfiddle.net/jonathon/bdbXk/

关于jquery - 使用 Jquery 访问多个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6565874/

相关文章:

jQuery $.ajax() 函数的错误消息来源

javascript - jQuery - 查找具有特定类的 child

jquery - 多个 jQuery-UI slider 的总计完成两次

javascript - 里面有文字的复选框

javascript - 使用 jquery 删除/添加类到主体

javascript - 如何检查复选框是否被选中?

jquery - 我可以仅更改类的某些实例的背景颜色吗?

jquery - "oCol is Undefined"使用数据表和 jQuery Ui 对话框

javascript - 如果按钮没有显示,请更改按钮的文本?

asp.net-mvc - Jquery UI 对话框发布到 ASP.Net MVC Controller 操作