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. 常用跨域方法总结（2）——CORS

    常用跨域方法总结(2)--CORS 上篇文章介绍了几种常用的跨域方法:常用跨域方法总结,本片为上一篇的补充,对比较重要的Cross Origin Resource Sharing详细介绍. CORS ...

  2. uploadify的使用错误

    在看singwa的视频教程中,学习使用hui-admin模版,在使用uploadify插件上传图片中出现错误. ReferenceError: Can't find variable: $因为使用JQ ...

  3. djanjo中url路由匹配规则是啥意思

    一,django路由匹配规则的本质是通过正则表达式对用户的url进行匹配. 1,r 是正则表达式中防止转义的符号,例如在python/n代表换行,加上r就不换行了. 2,$ 正则表达式中表示以什么什么 ...

  4. AutoMapper用法 转载https://www.cnblogs.com/youring2/p/automapper.html

    AutoMapper是对象到对象的映射工具.在完成映射规则之后,AutoMapper可以将源对象转换为目标对象. 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前 ...

  5. ORA-06550/PLS-00103

    原因是单引号‘是需要加转义字符的(即‘—>“)

  6. JVM内存图

  7. linux 下安装与使用

    一 安装 ## 先用wget下载源文件 wget http://download.redis.io/releases/redis-3.2.9.tar.gz ## 我自己建个文件夹 mkdir /usr ...

  8. PHP 图片裁切

    PHP CLASS TO CREATE IMAGE THUMBANILS Some years ago, I wrote a PHP class to create image thumbnails ...

  9. python之正则表达式【re】

    在处理字符串时,经常会有查找符合某些规则的字符串的需求.正则表达式就是用于藐视这些规则的工具.换句话说,正则表达式是记录文本规则的代码. 1.行定位符. 行定位符就是用来表示字符串的边界,“^”表示开 ...

  10. leetcode.数组.565数组嵌套-Java

    1. 具体题目 索引从0开始长度为N的数组A,包含0到N - 1的所有整数.找到并返回最大的集合S,S[i] = {A[i], A[A[i]], A[A[A[i]]], ... }且遵守以下的规则.假 ...