必威体育Betway必威体育官网
当前位置:首页 > IT技术

input标签multiple属性用法简介

时间:2019-10-17 13:43:23来源:IT技术作者:seo实验室小编阅读:87次「手机版」
 

multiple

今天一个朋友问我,是否可以一次上传多个文件,想了下,之前做过呀,使用多个input空间,type设置为file呀

如果使用一个input控件呢,是否可以,咨询了下前端同事,发现确实可以,使用multiple属性。

多文件上传

基于之前的多文件上传看,页面改造非常简单,将之前的多个input控件,删除的只剩一个,在input控件内增加multiple属性即可。

	<p class="input-group col-md-4">
		<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
		<input class="form-control" placeholder="请选择文件" type="file" name="files" multiple="multiple" />
	</p>

看效果,页面上似乎没有太大区别

点击选择文件后,在选中一个文件后,可以按住Ctrl 键再选择其他的文件,个数的上限暂时没有特意测试

选择好后,点击打开,可以看到,页面上会显示本次选中了几个文件

然后点击文件上传,便与之前的操作相同了,这里不再赘述。

这里的多文件上传,与多个input控件上传方式类似,不同的是,多个input控件单次上传的附件数据取决于input控件的个数,而使用multiple属性,则不限制单次上传文件个数。对于文件类型,多控件方式和multiple方式相同,单次均可以上传不同类型的文件。

select多选

form表单中,有个select标签,是个下拉单选效果,是否可以做出下拉复选效果呢,可以,使用multiple属性。

	<select name="car" id="car" multiple="multiple">
	  <option value ="volvo">Volvo</option>
	  <option value ="saab">Saab</option>
	  <option value="opel">Opel</option>
	  <option value="audi">Audi</option>
	  <option value="iveco">IVECO</option>
	  <option value="benz">Benz</option>
	</select> 

查看下页面效果

选择时,先选中一个元素,按住Ctrl键,便可以选择其他元素

提交到后台后,后台需要使用request.getparameterValues("car") 方法来获取前台选中值

运行程序后,可以从后台看到后台获取到前端传值 [opel, iveco]

这里给select增加multiple属性同CheckBox效果类似,后台的获取数据方式相同,唯一区别就是页面展现样式。

以上,今天学习到的一个知识点,记录下来,如果有不严谨地方,欢迎批评指正。谢谢。

相关阅读

完成以下页面(需要了解fieldset标签的用法)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .expa{ width: 800px;;} </style>

淘宝推出人群标签的目的是什么?

可能很多卖家对淘宝推出人群标签的目的很不理解,因为人群标签的推出后,很多卖家用以前的方法很难把产品操作上去。最常见的问题就是

淘宝人群标签包括价格标签分别的设置方法是什么?

在很多的淘宝店铺中,商家会有很多标签,人群标签是今天小编主要为大家介绍的,在人群标签中还包括有价格标签,这些都是有卖家朋友设置的

HTML 标签的 colspan 属性

语法 <td colspan="value"> 属性值 值 描述 number 设置单元格可横跨的列数。 注释:colspan="0" 指示浏览器横

【小程序】block标签的介绍和使用

转自:https://blog.csdn.net/qq_36530458/article/details/79778373<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做

分享到:

栏目导航

推荐阅读

热门阅读