HTML5之FileList文件列表对象的应用,可批量上传

在过去，上传文件的时候，我们每次都只能一次选择一个文件。如果想实现多文件上传，要么动态的增加file框要么使用Flash来代替。现在我们在HTML5中要想实现这个功能，是轻而易举的事情。

FileList对象：

FileList对象，其实就是多个file对象的列表。在HTML5中要想多文件上传我们只需要在原有的file类型的Input中加入multple属性即可。

HTML

<input id="W3Cfuns_FileList" type="file" multiple/>

JavaScript

为了能够让大家看清楚这个上传文本框，简单的写了一下JS，通过它来遍历出filelist中的文件，JS看不懂的话也没有关系，在这里主要是为了演示此控件的确获取了多个文件。

点击(此处)折叠或打开

function showFileName()
{
var file = document.getElementById("W3Cfuns_FileList");
for(var i = 0, j = file.files.length; i < j; i++)
{
alert(file.files[i].name);
}
}

完整的代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3Cfuns_FileList</title>
<script type="text/javascript">
function showFileName()
{
var file = document.getElementById("W3Cfuns_FileList");
for(var i = 0, j = file.files.length; i < j; i++)
{
alert(file.files[i].name);
}
}
</script>
</head>
<body>
<input id="W3Cfuns_FileList" type="file" multiple/>
<button onclick="showFileName();">提交</button>
</body>
</html>

转载于:https://www.cnblogs.com/webu/archive/2012/12/02/2798470.html

HTML5之FileList文件列表对象的应用,可批量上传相关推荐

java批量上传文件_Spring Boot2(十四)：单文件上传/下载，文件批量上传
文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备添加ma ...
处理文件工具类(批量上传,下载)
================================================================ 注意:此使用jsp+servlet进行文件的上传与下载测试,以及在ss ...
批量上传文件及进度显示
不带插件 ,自己写js,实现批量上传文件及进度显示今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代 ...
服务器上的文件夹设置ftp,设置ftp服务器上传文件夹
设置ftp服务器上传文件夹内容精选换一换监控数据上报功能可以将系统中采集到的监控数据写入到文本文件,并以FTP或SFTP的形式上传到指定的服务器中.使用该功能前,管理员需要在FusionInsi ...
微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...
tp5.1 乐视云上传视频文件(https请求http乐视云上传接口)http网址下上传视频(https API接口)
一.sdk_php_v2.0.zip 上传视频网址:http://www.lecloud.com/zh-cn/help/api.html tp5.1 乐视云上传视频文件(https请求http乐视云 ...
【vue】文件批量上传报错问题解决Uncaught TypeError: Cannot set properties of undefined (setting ‘status‘)
一.问题描述最近在vue项目上,使用el-upload组件实现多文件上传功能时出现了如下的报错内容. Uncaught TypeError: Cannot set properties of und ...
[Pulgin] 利用swfupload实现java文件批量上传
URL:http://blog.csdn.net/xuweilinjijis/article/details/8876305 之前在网上找过很多相关资料,很多所谓的批量上传都是忽悠人的,真正的批量上传 ...
sftp shell 批量上传文件_shell脚本进行sftp、ftp文件批量上传与下载
SFTP传送:若使用SecureCRT,按下ALT+P开启新的会话即进行sftp操作输入help命令,显示该SFTP提供所有的命令cd 路径更改远程目录到"路径" lcd 路径 ...
asp.net中实现文件批量上传
今天BOSS要求做一个批量上传文件的功能,忙活了半天,总算搞定,希望前辈们多加指点,下面来看一下效果图(这里是简化版,只介绍了主要实现过程,没有美化,勿怪!勿怪!): 单击添加文件,将自动添加File ...

HTML5之FileList文件列表对象的应用,可批量上传

HTML5之FileList文件列表对象的应用,可批量上传相关推荐

最新文章

热门文章