文件上传组件小结

发表于   |   分类于   |  

文件/图片上传组件小结

分为两部分来总结，第一部分为自定义样式，第二部分为js实现。

一. 自定义样式

通常来说，input[type=file]的默认样式都不能满足视觉的需求，所以需要套壳包装。常用的方式就是隐藏默认上传控件，并在其父级添加一个元素（比如label标签）来自定义样式，这样可以做到保留功能同时自定义样式。具体css代码如下：

1
2
3
4
5
//HTML5
<img src='' ref=preview>
<label class="u-btn btn-upload">
    <input type="file" ref=files  on-change={this.fileChange()}>上传图片
</label>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//CSS
.u-btn {   //基础按钮样式
    font: inherit;
    position:relative;
    line-height: 34px;
    display: inline-block;
    box-sizing: border-box;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    cursor: pointer;
    text-decoration: none;
    color: #444;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #f4f4f4;
    -webkit-appearance: none;
}
.u-btn:focus, .u-btn:hover {
    text-decoration: none;border: 1px solid #adadad;background: #e5e5e5;
}
.btn-upload {  
    overflow: hidden;
    input {
        opacity: 0;
        filter:alpha(opacity=0);
        font-size: 100px;
        position: absolute;
        top: 0;right: 0
    }
}

二. js实现

需求：上传单张图片，并能预览。

框架：regular

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 这里使用regular框架，不详细说明
// 在`input[type=file]`上绑定了`onchange`监听事件,回调为`fileChange`方法
fileChange: function(ev) {
    var input = this.$refs.files;  // regular获取节点的方式
    var preview = this.$refs.preview;  // 获取预览dom
    var file = input.files[0]; // 获取上传的文件
    if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) { //检查上传文件的类型，此处需要图片类型的文件，并且规定了后缀条件。
        //提示错误信息
        return;
    }
    var reader = new FileReader();
    var self = this;
    reader.onload = function(e) {
        var result = self.img = this.result; // this指向reader,这个result即上传文件数据，将这个result用ajax传输即可。
        // 组件操作，可忽略
        self.data.show = true;
        self.data.str = '重新选择'
        self.$emit('upload');
        preview.src = result; // 预览dom设置src
        // console.log(preview.naturalWidth)
        // console.log(preview.naturalHeight)
        // 组件操作，可忽略
        self.imgNatrualSize = {
            width: preview.naturalWidth,
            height: preview.naturalHeight
        }
        // 获取文件名
        var imgName = input.value;
        var index = imgName.lastIndexOf('\\');
        self.imgName = index !== -1 ? imgName.slice(index+1) : imgName;
        input.value = ''; // 清空图片上传框的值
   };
   reader.readAsDataURL(file); // 将文件转成base64的格式.
},

附录 FileReader API简介

###1. FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file 将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

2. FileReader对象的事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

var reader = new FileReader();
reader.onload = function() {  
    this.result;  
};

ps 可以利用这些事件制作文件读取的进度条，此处不详细展开，有空在做补充。