Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >input file多选 multiple[通俗易懂]

input file多选 multiple[通俗易懂]

作者头像

全栈程序员站长

发布于 2022-09-09 02:38:14

发布于 2022-09-09 02:38:14

2.6K02

代码可运行

举报

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：2

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

一直以为连点2次选择文件是多选，原来要按ctrl选中多个才是多选。。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		function ShowFileName(){
			var file;
			for (var i = 0;document.getElementById("file").files.length;i++) {
				file = document.getElementById("file").files[i];
				alert(file.name);
			}
		}
	</script>
	<body>
		<input type="file" id="file" multiple="multiple" size="200" />
		<input type="button" οnclick="ShowFileName();"  value="文件上传" />
	</body>
</html>

multiple就代表能多选了。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160959.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

Select multiple多选上移、下移

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/113502.html原文链接：https://javaforall.cn

全栈程序员站长

2022/07/07

1.1K0

input file文件上传(multiple)及FileReader：读取本地图片文件并显示

html5 html java

要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接口，所以像IE6这些老东西直接滚粗。

山河木马

2019/03/05

5.4K0

小记 HTML5 file对象

java https 网络安全

这是个很普通的 file 上传组件，multiple 是支持多选，当然 IE6-9 是不支持的，所以先不论他们了。

全栈程序员站长

2022/07/05

9020

小记 HTML5 file对象

getelementbyid属性与用法[通俗易懂]

java javascript 编程算法 html

语法：oElement = document .getElementById ( sID )

全栈程序员站长

2022/09/14

3.6K0

document.getElementById使用[通俗易懂]

html javascript java http https

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

全栈程序员站长

2022/09/14

4.7K0

js web上传文件夹,访问文件夹的多有文件 input type=file

运行input上传文件夹需要设置两个重要属性 webkitdirectory multiple

拿我格子衫来

2022/01/24

5.8K0

js web上传文件夹,访问文件夹的多有文件 input type=file

js中document.getElementById()用法「建议收藏」

jquery javascript html java

dom标准里面的获取当前文档中指定id的元素 if (document.getElementById(“regjm”).value != document.getElementById(“regjm1”).value ) { alert(“提示：请输入有效的认证码”); document.getElementById(“regjm1”).focus(); return false; } 例如: <script> function get() { if(document.getElementById(“Addr”).value==””) { alert(“null”); } else { alert(document.getElementById(“Addr”).value); } } </script> <head> <input type=”text” id=”Addr” value=””> <input type=”button” value=”click” οnclick=”get();”>

全栈程序员站长

2022/09/14

3.8K0

getElementById怎么调用

javascript java html 编程算法

然后你就可以借这个方法来引用网页文件中各个标签的属性了，当然这个被你引用的标签必须具有ID属性；

全栈程序员站长

2022/09/14

1.4K0

原生+TS实现todolist效果

document function return var 配置

爱学习的前端歌谣

2023/10/24

1870

原生+TS实现todolist效果

一简单的Ajax例子[通俗易懂]

html xml http https javascript

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” dir=”ltr”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″/> <title>Developing Web Application with Ajax – Example</title>

全栈程序员站长

2022/09/17

6300

HTML5的File API

说到File API，比如有意思就是图片上传了。国外有一个网站叫min.us 用户只需要把图片拖到网页面中，然后自己进行排序就OK了，很方便。

meteoric

2018/11/15

2K0

html5 文件api使用示例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html5文件API</title> <script type="text/javascript"> function getName(){ var file = document.getElementById("file"); //document.getElementById("file").files // 返回 FileList对象

好派笔记

2021/11/02

8210

WEB：文件上传 —— 看这篇就够了

servlet java api xml spring

HTML 表单最初只支持 application/x-www-form-urlencoded 形式编码（key=value&key=value...），但它不适合用于传输二进制数据（文件）或者包含非ASCII字符的数据。所以 multipart/form-data 就诞生了，专门用于传输文件。

WEBJ2EE

2019/07/30

6.8K0

WEB：文件上传 —— 看这篇就够了

JS基础——cssText的用法[通俗易懂]

java https 网络安全 html

和innerHTML一样，cssText很快捷且所有浏览器都支持。此外当批量操作样式时，cssText只需一次reflow，提高了页面渲染性能。

全栈程序员站长

2022/09/17

2.9K0

document.getElementById详解

html http https java javascript

document.getElementById(” “) 得到的是一个对象，用 alert 显示得到的是

全栈程序员站长

2022/09/14

3K0

使用FileReader对象的readAsDataURL方法来读取图像文件

编程算法 https api 网络安全

readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。

全栈程序员站长

2022/11/17

1.9K0

工作日两个日期之间的数

https java 网络安全

近期遇到要求两个日期之间的工作日天数的问题。遂在网上找了下js的代码。參考了下别人的代码，发现写的都有些冗余，于是自己思考，进行了一下简单处理。主要是在循环处理上进行了精简。

全栈程序员站长

2022/07/05

2.3K0

HTML中的setCapture和releaseCapture使用介绍

jquery html javascript java

setCapture函数的作用就是将后续的mouse事件都发送给这个对象，releaseCapture就是将鼠标事件还回去，由 document、window、object之类的自行来处理。这样就保证了在拖动的过程中，不会由于经过了其它的元素而受到干扰 – 另外，还有一个很重要的事情是，在Win32上，mouse move的事件不是一个连续的，也就是说，并不是我们每次移动1px的鼠标指针，就会发生一个mousemove，windows会周期性检查mouse 的位置变化来产生mousemove的事件。所以，如果是一个很小的页面对象，比如一个直径5px的圆点，如果没有setCapture和 releaseCapture，那么在鼠标按住之后，快速的移动鼠标，就有可能鼠标移动走了，但是小圆点还在原地，就是因为下一次的mousemove事件已经不再发给这个圆点对象了。

全栈程序员站长

2022/09/02

8900

setTimeout传参[通俗易懂]

https java 网络安全 jquery

这样就可以了… 为什么是这样呢. 因为setTimeout要求的第一个参数是函数…比如setTimeout(a_fun,1000)这样是可以的,a_fun是一个函数. 但是setTimeout(a_fun(),1000);这样就不行了.因为这里a_fun()其实是函数的返回值了…这样讲应该能明白了. 另外,不推荐网上有人用的方法setTimeout(‘test(1)’,1000);这样的形式,因为这个有很多情况下是不实用的. 如果实在要用这种方法，只能这样：setTimeout(“test(‘”+param+”‘)”,100);这种方式。

全栈程序员站长

2022/07/20

2.2K0

自定义oncontextmenu[通俗易懂]

https 网络安全 java html

转载于:https://www.cnblogs.com/heboliufengjie/p/4307181.html

全栈程序员站长

2022/09/21

3120

自定义oncontextmenu[通俗易懂]

相关推荐

Select multiple多选上移、下移

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验