一个input标签解决文件单选多选的问题

好久没写博客，最近项目优化，看见文件上传组件，发现之前用的是两个input标签，一个是多选，一个是单选，用过配置来控制显示或者隐藏

<div ng-click='!ctrl.fileUploader.isUploading && ctrl.reset($event)' class=" upload-text  text-center "ng-class="{'bg-disable':ctrl.fileUploader.isUploading}"><span ng-transclude></span><input type="file" class='input-btn' uploader="ctrl.fileUploader" nv-file-select ng-show='!ctrl.isMultiple'ng-disabled="ctrl.fileUploader.isUploading"ng-class="{'input-disable':ctrl.fileUploader.isUploading}"><input type="file" class='input-btn' uploader="ctrl.fileUploader" nv-file-select ng-show="ctrl.isMultiple"multiple="multiple" ng-disabled="ctrl.fileUploader.isUploading"ng-class="{'input-disable':ctrl.fileUploader.isUploading}">
</div>

如果input标签里面只要有multiple这个属性，不管你给的值是true或者false都是多选，没有这个属性就是单选，所以不能用multiple =‘false’或者multiple =‘true’控制，难道真的只能写2个标签？下面引入一个angular指令ng-prop

ng-prop指令

官方定义：该指令将表达式绑定到DOM元素属性,允许通过在属性中包含属性名称来写入任意属性,比如：将“my value”绑定到value属性上。

<input type="text" ng-prop-value="'my value'">

显示结果：

可以看出 input value属性值变成了“my value”！

如果我自己定义属性呢？

<input type="text" ng-prop-test="11111">

我们来打印一下这个dom元素的属性集合里面有没有test属性.

看打印结束是有这个属性的，然后我看下我没写multiple属性

默认值是false，那是不是我把这个multiple属性改成true就成多选了？然后改成这样

<input type="file"  ng-prop-multiple="true">

值确实变了，单选也变成多选了，那么我项目里面的html就可以改成如下

<div ng-click='!ctrl.fileUploader.isUploading && ctrl.reset($event)' class=" upload-text  text-center "ng-class="{'bg-disable':ctrl.fileUploader.isUploading}"><span ng-transclude></span><input type="file" class='input-btn' uploader="ctrl.fileUploader" nv-file-select ng-prop-multiple="ctrl.isMultiple"ng-disabled="ctrl.fileUploader.isUploading" ng-class="{'input-disable':ctrl.fileUploader.isUploading}">
</div>

这样一个标签就可以搞定，ctrl.isMultiple这个值是产品配置的值，就可以通过这个值来判断需要单选或者多选！好了说到这里都已经说的差不多了，有不正的地方请指正！！欢乐的时光总是过得特别快,又到时候和大家讲拜拜！！

一个input标签解决文件单选多选的问题相关推荐

ajax 解决csrf的3种方法，input标签的文件上传
ajax 解决csrf的3种方法,input标签的文件上传参考文章: (1)ajax 解决csrf的3种方法,input标签的文件上传 (2)https://www.cnblogs.com/gyh0 ...
JavaScript 编写简单的 html input标签提交文件验证
这里不会介绍如何传输文件如果您想了解文件是如何传输到服务器的请进入传送门[Ajax实现简单图片文件异步上传并显示] 让用户提交文件永远是一件危险的事情,而提交之前的验证就显得必不可少了,而如果在文件 ...
layui checkbox Ajax提交name只有拿到最后一个值value解决办法,无法全选
<input type="checkbox" name="cityNos" lay-skin="primary" lay-filter ...
解决谷歌浏览器（chrome）input标签自动填充数据的问题，亲测有效
问题:如题,在谷歌浏览器中,有时input标签会自动填充数据,如用户名密码等... 解决:给input标签加上autocomplete属性, 如果是type="text"就加上au ...
vue+element 使用el-tag实现单选多选，动态添加删除标签
以下是完整代码,仅供参考: <template><div class="tagDialog crmDialog"><el-dialogtitle=&q ...
[前台]---input标签中的hidden,浏览器差异问题
前言: 这是一个比较简单的问题,也有人犯过这样的错误,如果你是一个人在编码,并且没有专门的去测试浏览器差异,这个或许会坑到你问题描述: 用input标签的时候,需要把这个input隐藏掉,于是先这样 ...
HTML input标签中disabled属性
HTML 标签的 disabled 属性这是一个不可输入的文本框 <input type="text" name="" disabled="d ...
label标签与input标签的对齐问题
如果要实现上面这种对齐效果,直接拉到文章底,反正我会说一堆废话.jpg 在这里使用的是嵌套格式: <label>Text<input/></label> 而非通常的 ...
如何自动聚焦到表单的某个input标签（autofocus）
我们可以让表单显示出来的时候即聚焦于某个 input 元素,这样用户就能直接在其中输入数据而不必先动手选择它要实现这种效果,我们需要用到 input 标签的 autofocus 属性 <!DO ...

一个input标签解决文件单选多选的问题

ng-prop指令

一个input标签解决文件单选多选的问题相关推荐

最新文章

热门文章