input标签multiple属性用法简介

骑猪看日落 2022-04-08 11:44 670阅读 0赞

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

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

### 多文件上传 ###

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 2][]

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

这里的多文件上传，与多个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>

查看下页面效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 4][]

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

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

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

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

[Link 1]: https://blog.csdn.net/magi1201/article/details/82757063
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70]: /images/20220405/b00fd5b8486b4e828120f534472d3f36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 1]: /images/20220405/731be0c7ba314cb3b8375eda7abab668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 2]: /images/20220405/2951e30cc5a74f8abcb9ddca30c44e7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 3]: /images/20220405/c908b80085aa48cd9d85c4de972e9902.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hZ2kxMjAx_size_16_color_FFFFFF_t_70 4]: /images/20220405/8e5fab0f95124b57b83da9c0b7207934.png