1. 在input标签中加入 multiple 属性，可以在一个输入框中选择多个文件进行上传
<input type="file" name="img" multiple="multiple" />
当然，这样也是一样的：　
<input type="file" name="img" 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" onchange="onc()" multiple="multiple" />

<input type="submit" />

</form>

<p>请尝试在浏览文件时选取一个以上的文件。</p>

</body>

</html>

　　

input框多文件上传的更多相关文章

  1. UI自动化之特殊处理二（弹框\下拉框\选项\文件上传）

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

  2. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

  3. 动态input file多文件上传到后台没反应的解决方法！！！

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  4. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  5. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  6. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  7. jspsmartupload 文件上传让input数据和文件上传同时提交

    一.使用原因: 文件上传时,表单的属性中必须要有multipart/form-data,如以下例子: <form name="form_post" class="a ...

  8. 可编辑的el-table表格,结合input输入,upload文件上传的表格

    最近整理了一下,table表格的编辑状态,把一般表格里需要输入的类型都放进来了,实现的功能如图     这里面的input输入框没什么好说的,绑定对应的值就可以,要注意的是组件上传的upload,这个 ...

  9. input type="file"文件上传到后台读取

    html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...

随机推荐

  1. [Repost] 悬线法

    <浅谈用极大化思想解决最大子矩形问题>作者:王知昆 首先,根据定理1:最大有效子矩形一定是一个极大子矩形.不过与前一种算法不同的是,我们不再要求每一次枚举的一定是极大子矩形而只要求所有的极 ...

  2. 修改Tomcat的server.xml之后，tomcat 部署项目报错：Removing obsolete files from server... Could not clean server of obsolete files: null java.lang.NullPointerException

    介个是你在clean tomcat的时候 文件没有clean清.(临时崩溃 系统宕机或其他原因)导致自己eclipse里的service.xml 在clean时没有copy一致. 解决方案: 1找到你 ...

  3. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  4. 本地安装了flash，前台浏览器还显示需要安装flash？是因为版本需要对应

    NPAPI:适用于FireFox(火狐).Safari(苹果).Opera (欧朋,12.17版以下) PPAPI:适用于Chromium浏览器.Opera (欧朋,15.00版以上) ActiveX ...

  5. HDU 1875 畅通工程再续 (Prim)

    题目链接:HDU 1875 Problem Description 相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现 ...

  6. python学习笔记：模块——自定义模块的3种导入方式

    一.定义 模块就是用一堆的代码实现了一些功能的代码的集合,通常一个或者多个函数写在一个.py文件里,而如果有些功能实现起来很复杂,那么就需要创建n个.py文件,这n个.py文件的集合就是模块.如果不懂 ...

  7. 【python标准库学习】thread，threading(一)多线程的介绍和使用

    在单个程序中我们经常用多线程来处理不同的工作,尤其是有的工作需要等,那么我们会新建一个线程去等然后执行某些操作,当做完事后线程退出被回收.当一个程序运行时,就会有一个进程被系统所创建,同时也会有一个线 ...

  8. ActionEnter cannot be resolved to a type

    2014-6-13 23:50:57 org.apache.catalina.core.StandardWrapperValve invoke严重: Servlet.service() for ser ...

  9. px2rem-loader（Vue:移动端自适应，px自动转化）

    1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标 ...

  10. 用dialog包制作窗口

    #!/bin/bash temp=$(mktemp -t test.XXXXXX) temp2=$(mktemp -t test.XXXXXX) function diskspace { df -k ...