File单行文件上传组件

2024-06-19 10:06:33首发，17小时前更新

AX-FILE自定义标签是对原生file标签的封装，除了保持单选和多选文件能之外，另外增加了工具箱、文件数量限制提示和数量校验的支持。

简单使用

由于原生的type=file表单域比较丑陋，很难与其他表单域在视觉上做到整齐划一，所以基于原生文件域的功能简单封装了了file组件，功能简单，视觉统一。

直接在页面中使用空白的ax-file标签即可表示单选的文件域。

输出
HTML

```
                
                
            
```

multiple多选

如果希望文件域组件可多选，像原生文件域一样追加multiple即可。

输出
HTML

```
                
                
            
```

accept可选类型

如果希望文件域组件指定可选文件类型，像原生文件域一样追加accept即可。

输出
HTML

```
                
                
            
```

disabled和readonly

这两个布尔属性也是支持的，效果跟原生文件域一致。

输出
HTML

```
                
                
            
```

使用label

虽然placeholder已经可以给出了提示，但是还是可以使用label存放字段的标题以强化功能。

输出
HTML

```
                
                
            
```

取值

可以像原生标签那样获取组件的name、value、disabled、readOnly和multiple值。

注意，readOnly中的O是大写的；另外原生file控件的value值仅仅是文件名，但是本组件的value值是文件数组，因为提交文件名是没有任何意义的，提交文件实体才有意义。

输出
HTML
JS

```
                
                
            
```

                
                let vals = document.querySelector('#vals');
                getvals.onclick=function(){
                    this.innerHTML = `name:${vals.name},disabled:${vals.disabled},readOnly:${vals.readOnly},multiple:${vals.multiple},在控制台查看value值`;
                    console.log(vals.value)
                }

placeholder替代文本

文件域组件的替代文本使用placeholder属性表示，默认值是：请选择文件...，如果需要自定义placeholder，可使用placeholder属性或者将替代文本直接写入标签内。

输出
HTML

请选择指定的文件...
```
                
                
            
```

size尺寸

通过size属性可设置文件域组件的尺寸，支持sm、md（默认）和lg三种尺寸。

输出
HTML

```
                
                
            
```

使用工具

通过tools属性设置文本域的工具箱，直接追加tools属性或者设置tools=true，将默认启用清除按钮。

该工具箱是由createTools函数创建，该函数详细使用方法请点击这里。

自定义工具箱的写法举例：

简写，例如：tools='["update","remove","close"]'
完整写法，例如：tools='[{name:"test",icon:"_icon-global"},...]'
混合写法，例如：tools='[{name:"test",icon:"_icon-global"},"remove","close",...]'

输出
HTML

```
                
                
            
```

事件监听

因为组件内包含了一个非隐藏状态的文本域，所以组件拥有文本域的所有事件（input、change、paste等），建议使用addEventListener方法订阅事件。

实际上除了blur和focus事件不能使用on+event方法订阅之外，其他事件都可以使用on+event方法订阅。

输出
HTML
JS

```
                
                
            
```

                
                let el = document.querySelector('[name="demo2001"]');
                el.addEventListener('input',()=>{
                    console.log('input事件，当前值：',el.value)
                });
                el.addEventListener('change',()=>{
                    console.log('change事件，当前值：',el.value)
                });
                el.addEventListener('blur',()=>{
                    console.log('blur事件，当前值：',el.value)
                });
                el.addEventListener('focus',()=>{
                    console.log('focus事件，当前值：',el.value)
                });
                el.addEventListener('paste',()=>{
                    console.log('paste事件，当前值：',el.value)
                });
                el.addEventListener('cut',()=>{
                    console.log('cut事件，当前值：',el.value)
                });
                el.addEventListener('copy',()=>{
                    console.log('copy事件，当前值：',el.value)
                });

由于使用addEventListener方法传参比较麻烦，所以另外提供了一组监听事件。

changed：当值改变的时候触发，支持一个参数，该参数为一对象，对象属性包含newVal和oldVal
input：当原生表单域在手动输入值的时候触发，支持一个参数即当前的值
cleared：清除表单域值的时候触发，无参数
setted：设置属性时候触发，支持一个参数，该参数为一个对象，包含key和value属性

输出
HTML
JS

```
                
                
            
```

                
                let onins = document.querySelector('[name="on"]');
                onchangebtn.onclick =()=>{
                    onins.setAttribute('value','中华上下五千年');
                }
                onclear.onclick=()=>{
                    onins.clear();
                }
                onins.on('changed',(data)=>{
                    console.log('值改变了',data)
                }).on('input',(data)=>{
                    console.log('因输入，值改变了',data)
                }).on('cleared',(data)=>{
                    console.log('值清空了')
                }).on('setted',(data)=>{
                    console.log('设置了值：',data)
                });;

操作方法

内置了reset()、clear()、set(key,val)、blur和focus方法，说明如下：

reset()：重置attrs属性，恢复到初始状态
clear()：强制将当前的value设为空，但不改变attrs其他属性
set(data)：设置单个或多个attr属性，参数data支持两种数据格式：
- 一个对象，包含key和value属性，例如set({key:'name',value:'demo'})
- 一个对象数组，每一项均包含key和value属性，例如set([{key:'name',value:'demo'},{}])

因为原生的文件域必须通过触发click事件才可以获得文件或文件数组，所以当设置value属性时会当做重置处理。

输出
HTML
JS

```
                
                
            
```

                
                let demo = document.querySelector('#demo');
                demo.on('reset',()=>{
                    console.log('属性重置了！');
                });
                demo.on('cleared',()=>{
                    console.log('清除了文件域内容！');
                });
                demo.on('changed',(data)=>{
                    console.log('替换了文件：',data);
                });
                demo.on('setted',(key,val)=>{
                    console.log('设置了值',key,val);
                });
                edit.onclick =()=>{
                    demo.setAttribute('placeholder','请选择指定文件类型...');
                    demo.setAttribute('size','lg');
                }
                set.onclick=()=>{
                    demo.set({key:'placeholder',value:'通过set方法设置属性...'});
                }
                reset.onclick=()=>{
                    demo.reset();
                }
                clear.onclick=()=>{
                    demo.clear();
                }

使用校验

表单域校验是独立的操作方法，如果需要必填校验，直接追加ax-valid="trigger:'change'"属性即可（触发方式需使用change），详细用法请点击这里。

如果测试校验，请务必使用name属性，确保表单域在form中的唯一性。

输出
HTML

```
                
                
            
```

使用缓存

当改变了元素的属性或者value值的时候，如果需要缓存数据，以期再次加载页面的时候复原上一次的属性和value值，可使用stor-name属性，但是需要确保该属性值在浏览器缓存中是唯一的。

file控件跟其他input控件不同的地方在于，file控件必须通过手动触发click事件才可获得文件或文件组，另外file的value仅仅是文件的文件名并不是文件的实体，所以保存value是没有任何意义的。

如果需要缓存文件地址，可使用ax-upload组件。

输出
HTML
JS

```
                
                
            
```

                
                let file001 = document.querySelector('[stor-name="file001"]');
                edit02.onclick =()=>{
                    file001.setAttribute('placeholder','中华上下五千年');
                    file001.setAttribute('tools','');
                    console.log('当前数据：',ax.storage.get('file001'));
                }
                reset02.onclick=()=>{
                    file001.reset();
                    console.log('当前数据：',ax.storage.get('file001'));
                }
                clear02.onclick=()=>{
                    file001.clear();
                    console.log('当前数据：',ax.storage.get('file001'));
                }