当前位置: 首页 > news >正文

input 的multiple 上传多个文件

1.在input标签中加入 multiple 属性,可以在一个输入框中选择多个文件进行上传
<input type="file" name="img" multiple="multiple" />
当然,这样也是一样的: 
<input type="file" name="img" multiple />

2.很多时候上传的时候,我们要限制一下上传文件类型(

在windows中主要是限制后缀名
),或者是把选择的文件名(路径)输出到当前页面,,
这需要用js取得选择文件的名字:

  document.getElementById("input").files[i].name

最后注意:Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。
附一段Demo:

<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<script type="text/javascript">
function onc(){
var files = document.getElementById("input").files;
for(var i=0; i< files.length; i++){
alert(input.files[i].name);
}
}
</script>
<form action="/example/html5/demo_form.asp" method="get">
选择图片:<input type="file" id="input" name="input" οnchange="onc()" multiple="multiple" />
<input type="submit" />
</form>
<p>请尝试在浏览文件时选取一个以上的文件。</p>

</body>
</html>

转载于:https://www.cnblogs.com/zhpblog/p/6848051.html

相关文章:

  • 安防IP Camera固件分析
  • java汇总
  • zookeeper
  • js练习题
  • Oracle 索引扫描的五种类型
  • 《Netty官方文档》开发者指南
  • 忘记cacti密码的解决方法
  • 2017 前端面试准备 - 收藏集 - 掘金
  • Xcode 各版本简介
  • VMware Ubuntu NAT 不能上网
  • 网络爬虫基本原理(一)
  • 音频中采样位数,采样率,比特率的名词解释(转)
  • Android内存泄漏的常见场景及解决方案
  • Linux CentOS下安装、配置mysql数据库
  • virtualenv和virtualenvwrapper的安装和使用
  • 分享一款快速APP功能测试工具
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • CAP理论的例子讲解
  • Create React App 使用
  • CSS选择器——伪元素选择器之处理父元素高度及外边距溢出
  • ES学习笔记(12)--Symbol
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • IDEA常用插件整理
  • JavaWeb(学习笔记二)
  • Kibana配置logstash,报表一体化
  • Objective-C 中关联引用的概念
  • php的插入排序,通过双层for循环
  • Python十分钟制作属于你自己的个性logo
  • SpringBoot几种定时任务的实现方式
  • Vue 动态创建 component
  • vue从创建到完整的饿了么(18)购物车详细信息的展示与删除
  • Windows Containers 大冒险: 容器网络
  • 爱情 北京女病人
  • 将回调地狱按在地上摩擦的Promise
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 线性表及其算法(java实现)
  • 写代码的正确姿势
  • ​queue --- 一个同步的队列类​
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #Java第九次作业--输入输出流和文件操作
  • $NOIp2018$劝退记
  • (2015)JS ES6 必知的十个 特性
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (层次遍历)104. 二叉树的最大深度
  • (附源码)spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • (十六)Flask之蓝图
  • (算法)求1到1亿间的质数或素数
  • (图)IntelliTrace Tools 跟踪云端程序
  • (转)socket Aio demo
  • (转)Sublime Text3配置Lua运行环境
  • ... fatal error LINK1120:1个无法解析的外部命令 的解决办法
  • ./configure,make,make install的作用
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions