上传文件选择组件（图片或者文件）

字数： 2.4k字   |    阅读时长： 13min  |   阅读量： 次

前提：本组件是根据项目进行开发，所以在技术选择上有相对固定的选择，当然大体使用都差不多。

需求

选择文件的按钮，可以配置按钮的名称、文件是否是单文件、文件类型（图片或者其他）、文件 format

技术

  1. JavaScript 、JQuery (Ajax) 、Mustache 、Layui.css
  2. Vue 、 httpVueLoader 、axios 、Layui.css

方案1

代码如下：

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
var SelectFile = function () {};
SelectFile.prototype = {
    /**
     * 渲染 selectFile
     * @param el 渲染的 div 的 jquery 选择器表示
     * @param para 其中参数都是可选的
     * @param changeFile 获取文件数据的函数
     */
    render: function (el, para, changeFile) {
        // 初始化参数
        var name = para.name || '选择文件';
        var multi = para.multi || false;
        var type = para.type || 'text'; // 两种 'picture' | 'text'
        var format = para.format || '';
        var fileList = para.files || [];
        var files = [];
        var _this = this;

        // 渲染 html
        var temp = '<div class="selectFile"><button type="button" class="btn btn-default btn-input">{{name}}</button><input type="file" '+
            'accept="{{format}}" class="btn btn-default input" {{getMulti}}>'+
            '<div class="{{getListClass}} list" style="{{getListStyle}}">'+
            '{{#fileList}}{{{getItemContent}}}{{/fileList}}'+
            '</div>'+
            '</div>';

        var view = Mustache.render(temp, {
            name: name,
            multi: multi,
            type: type,
            format: format,
            fileList: fileList,
            getMulti: function () {
                if (this.multi) {
                    return 'multiple'
                }
                return ''
            },
            getListClass: function () {
                if (this.type === 'picture') return 'pic-list';
                return 'file-list'
            },
            getListStyle: function () {
                var style = '';
                if (!this.multi) {
                    if (this.type === 'picture') {
                        style += 'width: 122px;'
                    } else {
                        style += 'display: inline-block; width: 200px; margin-top: 0;'
                    }
                }
                if (this.fileList.length === 0 && this.type === 'picture') style += 'display: none;';
                return style
            },
            getItemContent: function () {
                return getItemC(this)
            }
        });
        function getItemC(item) {
            var temp = '<li class="item">';
            if (type === 'picture') {
                temp += '<img src="' + item.src + '" alt="' + item.name + '" title="' + item.name + '" class="img" >'
            } else {
                temp += '<i class="fa fa-file-text-o icon"></i><span class="name" title="' + item.name + '">' + item.name + '</span>'
            }
            temp += '<i class="delete fa fa-times" style="display: none;"></i></li>';
            return temp
        }
        $(el).html(view);

        // 绑定 hover 删除按钮的显示与隐藏事件
        hoverIcon();
        function hoverIcon() {
            $(el + ' .list .item').unbind();
            $(el + ' .list .item').hover(function () {
                $(this).children('.delete').show();
                deleteIcon();
            }, function () {
                $(this).children('.delete').hide()
            });
        }

        // 绑定文件添加事件
        $(el + ' .selectFile .input').unbind();
        $(el + ' .selectFile .input').bind('change', function (e) {
            var myfiles = e.target.files;
            var len = myfiles.length;
            if (len > 0) {
                if (!multi) {
                    files = []
                }
                if (type === 'picture') {
                    for (var i = 0; i < len; i++) {
                        getFileSrc(myfiles[i], addFiles)
                    }
                } else {
                    for (var i = 0; i < len; i++) {
                        addFiles(myfiles[i])
                    }
                }

                function addFiles(data) {
                    files.push(data);   // 直接赋值没法更新显示的图片

                    if (myfiles[len-1] === data) {
                        // 本轮最后的图片添加之后，触发 change 事件 => 通知父组件进行操作
                        // 更新 dom
                        var views = '';
                        if (multi) {
                            for (var i = 0; i < len; i++) {
                                views += getItemC(myfiles[i])
                            }
                        } else {
                            views += getItemC(myfiles[0])
                        }
                        $(el + ' .selectFile .list').show();
                        if (files.length === 1) {
                            $(el + ' .selectFile .list').html(views);
                        } else {
                            $(el + ' .selectFile .list').html($(el + ' .selectFile .list').html() + views);
                        }
                        hoverIcon();
                        changeFile(files)
                    }
                }
            }
            // 用于图片回显, 有时候会出错， 图片显示不出来
            function getFileSrc(file, callback) {
                if (!window.FileReader) return 'fail';
                var reader = new FileReader();
                reader.readAsDataURL(file);
                // 回调
                reader.onloadend = function () {
                    file.src = this.result;
                    callback(file)
                };
                reader.onerror = function () {
                    console.error('图片' + file.name + '显示出错！')
                };
                return 'success'
            }
        });

        // 绑定文件删除事件
        function deleteIcon() {
            $(el + ' .selectFile .item .delete').unbind();
            $(el + ' .selectFile .item .delete').bind('click', function () {
                // 删除文件和传递的文件数组中的文件变量
                var indexFile = -1;
                var listItem = $(this).parent();
                $(el + ' .selectFile .item').each(function (index, item) {
                    if (listItem[0] === item) {
                        indexFile = index;
                        return false
                    }
                });
                if (indexFile !== -1) {
                    files.splice(indexFile, 1);
                }
                listItem.remove();
                if (files.length === 0 && type === 'picture'){
                    $(el + ' .selectFile .list').hide()
                }
                changeFile(files)
            });
        }

    }
};

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="selectFile"></div>
<div id="selectFile1"></div>
<!-- 插件自行引入 -->
<script>
var select = new SelectFile();
    select.render('#selectFile', {
        files: [],
        multi: true
    }, function (fileList) {
        console.log('changeFile ', fileList)
    });
    select.render('#selectFile1', { type: 'picture' }, function (fileList) {
        console.log('changeFile ', fileList)
    })
</script>

样式如下：

方案2

其实非常想用 vue 写，但是项目改成 vue 项目比较费事，其中很多业务也不了解。
但是这几个组件都是一开始用 vue 写的，然后再改成 jquery 和 mustache 等来。

selectFile.vue 代码如下：

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<template>
    <div class="selectFile">
        <!--
        1、 按钮点击选择文件，传到内存中，
        然后点击上传（该上传按钮不在本组件中，由用户操控） 传到服务器
        2、 有三种显示方式：
            a. 直接显示一个文件名称
            b. 多文件列表形式展示文件
            c. 图片上传可以预览图片
        -->
        <button class="btn btn-default btn-input" type="button">{{name}}</button>
        <input type="file" class="btn btn-default input" :accept="format" ref="inputFile"
               @change="changeFile($event)" :multiple="multi">
        <div v-if="type !== 'picture'" class="file-list" :style="multi ? '' : 'display: inline-block; width: 200px; margin-top: 0;'">
            <li v-for="(item, index) in files" :key="index" class="item"
                @mouseover="active = index" @mouseout="active = -1">
                <i class="fa fa-file-text-o icon"></i><span class="name" :title="item.name">{{item.name}}</span>
                <i class="delete fa fa-times" @click="deleteFile(index)" v-show="index === active"
                   @mouseover="active = index" @mouseout="active = -1"></i>
            </li>
        </div>
        <div v-else v-show="files.length" class="pic-list" :style="multi ? '' : 'width: 122px;'">
            <li class="item" v-for="(item, index) in files" :key="index">
                <img :src="item.src" :alt="item.name" :title="item.name" class="img"
                     @mouseover="active = index" @mouseout="active = -1">
                <i class="delete fa fa-times" @click="deleteFile(index)" v-show="index === active"
                   @mouseover="active = index" @mouseout="active = -1"></i>
            </li>
        </div>
    </div>
</template>

<script>
    module.exports = {
        name: "selectFile",
        data: function () {
            return {
                files: [],
                active: -1
            }
        },
        props: {
            name: {
                type: String,
                default: function () {
                    return '选择文件'
                }
            },
            multi: Boolean,
            type: {
                type: String,
                default: function () {
                    return 'text'
                }
            }, // 'picture' | 'text'
            // todo 初始化回显文件列表
            // fileList: Array,
            format: {
                type: String,
                default: function () {
                    return ''
                }
            }
        },
        methods: {
            changeFile: function (e) {
                var _self = this;
                var len = e.target.files.length;
                if (len > 0) {
                    if (!this.multi) {
                        _self.files = []
                    }
                    if (this.type === 'picture') {
                        for (var i = 0; i < len; i++) {
                            getFileSrc(e.target.files[i], addFiles)
                        }
                    } else {
                        for (var i = 0; i < len; i++) {
                            addFiles(e.target.files[i])
                        }
                    }

                    function addFiles(data) {
                        _self.files.push(data);   // 直接赋值没法更新显示的图片
                        if (e.target.files[len-1] === data) {
                            // 本轮最后的图片添加之后，触发 change 事件 => 通知父组件进行操作
                            _self.$emit('change', _self.files)
                        }
                    }
                }
                // 用于图片回显
                function getFileSrc(file, callback) {
                    if (!window.FileReader) return 'fail';
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    // 回调
                    reader.onload = function () {
                        file.src = this.result;
                        callback(file)
                    };
                    return 'success'
                }
            },
            deleteFile: function (index) {
                this.files.splice(index, 1);
                this.active = -1
            }
        },
        mounted: function () {
            // console.log('selectFile mount')
        }
    }
</script>

<style>
.selectFile {
    margin-top: 20px;
    margin-left: 10px;
    position: relative;
}
.selectFile .btn-input {
}
.selectFile .input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 78px;
    height: 32px;
    border-width: 0;
    padding: 0;
    cursor: pointer;
    box-shadow: unset;
}

/* 文本显示设置 */
.selectFile .file-list {
    margin-top: 10px;
    width: 300px;
}

.selectFile .file-list .item {
    line-height: 28px;
    height: 32px;
    width: 100%;
    color: #444;
    padding: 0 10px;
}

.selectFile .file-list .item .name {
    display: inline-block;
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    vertical-align: middle;
}

.selectFile .file-list .item .icon {
    opacity: 0.5;
    font-size: 14px;
    vertical-align: middle;
    padding-right: 5px;
}

.selectFile .file-list .item .delete {
    float: right;
    opacity: 0.6;
    font-size: 12px;
    margin-top: 10px;
    cursor: pointer;
}

.selectFile .file-list .item:hover {
    background-color: rgba(0, 150, 136, 0.05);
}

/* 图片显示设置 */
.selectFile .pic-list {
    margin-top: 10px;
    border: 1px solid #dddddd;
    padding: 10px;
    width: 522px;
}

.selectFile .pic-list > .item {
    height: 100px;
    width: 100px;
    display: inline-block;
    position: relative;
}

.selectFile .pic-list .item .img {
    height: 100%;
    width: 100%;
}

.selectFile .pic-list .item .delete {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    color: rgba(0, 0, 0, .8);
    opacity: 0.6;
    font-size: 100px;
    padding-left: 13px;
}
</style>

selectFile.js 代码如下：

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
Vue.use(httpVueLoader);

var SelectFile = function () {}
SelectFile.prototype = {
    /**
     * 渲染 selectFile
     * @param element 渲染的 div 的 jquery 选择器表示
     * @param para 其中参数都是可选的
     * @param changeFile 获取文件数据的函数
     */
    render: function (element, para, changeFile) {
        $(element).html('<selectfile :multi="multi" @change="changeFile"' +
            ' :type="type" :name="name"></selectfile>')
        new Vue({
            el: element,
            data: function () {
                return {
                    multi: para.multi || false, //
                    type: para.type || 'text', //
                    name: para.name || '', //
                    format: para.format || '', //
                }
            },
            components: {
                // 将组建加入组建库
                'selectfile': httpVueLoader('../components/selectFile.vue')  // js 调用的路径需要注意
            },
            methods: {
                /**
                 * 获取数据表数据
                 * @param page 当前显示的页码数
                 * @param limit 每页多少条数据
                 */
                changeFile: function (fileList) {
                    changeFile(fileList)
                }
            }
        })
    }
}

使用示例（与上面相同）：

1
2
3
4
5
6
7
8
9
10
<div id="container"></div>
<script>
    var select = new SelectFile();
    select.render("#container", {
        files: [],
        multi: true
    }, function(fileList) {
        console.log('changeFile ', fileList)
    })
</script>
本文作者： jeneen
发布时间： 2021-10-11
最后更新： 2023-05-09
本文标题： 上传文件选择组件（图片或者文件）
本文链接： https://zx1001011.github.io/2021/10/11/pluginofSelectFile/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家