├── assets
    └── cut.png
├── README.md
├── pages
    └── test.vue
├── components
    ├── Doing.vue
    ├── Images.vue
    └── Uploader.vue
└── utils
    └── imageUtil.js


/assets/cut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yywang95/h5ImageUploader/HEAD/assets/cut.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # h5ImageUploader
 2 | 一个具有图片旋转、压缩、下载功能的h5上传组件
 3 | 
 4 | # 功能说明
 5 | - 项目基于vue
 6 | - 可用于pc端、h5
 7 | - 当上传图片的时候会根据limitsize属性对图片进行压缩
 8 | - ios拍照会出现图片旋转的情况，该组件对这种旋转情况进行了修复: https://blog.csdn.net/xiaoermingn/article/details/94398621
 9 | - 可对已上传的图片进行下载
10 | 
11 | # 样式截图
12 | ![image](https://github.com/yywang95/h5ImageUploader/blob/master/assets/cut.png)
13 | 
14 | `注意`：仅上传部分代码，不可直接运行，请根据自己项目的接口进行参考～
15 | 


--------------------------------------------------------------------------------
/pages/test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Images
 4 |             :id="'pics'"
 5 |             :items="pics"
 6 |             @on-error="listenUploadError"
 7 |             @on-success="listenUploadSuccess"
 8 |             @on-delete="listenUploadDelete" />
 9 |     </div>
10 | </template>
11 | <script>
12 | import Images from '@/components/Images';
13 | 
14 | export default {
15 |     data() {
16 |         return {
17 |             pics: [],
18 |         };
19 |     },
20 |     methods: {
21 |         /** @desc 图片上传错误 */
22 |         listenUploadError(id, msg, item) {
23 |             console.error(`图片${item.name}上传失败：${msg}`);
24 |         },
25 |         /** @desc 图片上传成功 */
26 |         listenUploadSuccess(id, urls) {
27 |             this[id].push(...urls);
28 |         },
29 |         /** @desc 图片删除 */
30 |         listenUploadDelete(id, item, index) {
31 |             this[id].splice(index, 1);
32 |         },
33 |     },
34 | };
35 | </script>


--------------------------------------------------------------------------------
/components/Doing.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="doing-component">
 3 |         <div class="doing-content">
 4 |             <img class="doing-icon" src="//img.58cdn.com.cn/lbg/jianzhan/images/loading.gif" />
 5 |             <div class="doing-text">{{text}}</div>
 6 |         </div>
 7 |     </div>
 8 | </template>
 9 | <script>
10 | /**
11 |  * @description loading组件，类似微信的wx.showLoading
12 |  */
13 | export default {
14 |     props: {
15 |         mask: {
16 |             type: Boolean,
17 |             default: true,
18 |         },
19 |         text: {
20 |             type: String,
21 |             default: '上传中',
22 |         },
23 |     },
24 | };
25 | </script>
26 | <style lang="scss" scoped>
27 | .doing-component {
28 |     z-index: 999;
29 |     position: fixed;
30 |     top: 0;
31 |     bottom: 0;
32 |     left: 0;
33 |     right: 0;
34 | }
35 | .doing-content {
36 |     position: absolute;
37 |     top: 0;
38 |     bottom: 0;
39 |     left: 0;
40 |     right: 0;
41 |     margin: auto;
42 |     padding: 40px 0;
43 |     width: 200px;
44 |     height: 100px;
45 |     text-align: center;
46 |     color: #fff;
47 |     border-radius: 5px;
48 |     background: rgba(0, 0, 0, .6);
49 | }
50 | .doing-text {
51 |     font-size: 28px;
52 | }
53 | .doing-icon {
54 |     display: inline-block;
55 |     margin-bottom: 25px;
56 |     width: 40px;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/utils/imageUtil.js:
--------------------------------------------------------------------------------
  1 | // 该文件存放图片或canvas相关处理的常用方法
  2 | import Exif from 'exif-js';
  3 | 
  4 | /**
  5 |  * @desc 获取图片信息，使用exif.js库，具体用法请在github中搜索
  6 |  * @param {Object} file 上传的图片文件
  7 |  * @param {String} tag 需要获取的信息 例如：'Orientation'旋转信息
  8 |  * @return {Promise<Any>} 读取是个异步操作，返回指定的图片信息
  9 |  */
 10 | export const getOrientation = (file, tag) => {
 11 |     if (!file) return 0;
 12 |     return new Promise((resolve, reject) => {
 13 |         /* eslint-disable func-names */
 14 |         // 箭头函数会修改this，所以这里不能用箭头函数
 15 |         Exif.getData(file, function () {
 16 |             const o = Exif.getTag(this, tag);
 17 |             resolve(o);
 18 |         });
 19 |     });
 20 | };
 21 | 
 22 | /**
 23 |  * @desc 将base64的图片转为文件流
 24 |  * @param {String} dataUrl base64数据
 25 |  * @return {Object} 文件流
 26 |  */
 27 | export const dataURLtoFile = (dataUrl) => {
 28 |     const filename = `img${Date.now()}`;
 29 |     const arr = dataUrl.split(',');
 30 |     const mime = arr[0].match(/:(.*?);/)[1];
 31 |     const bstr = atob(arr[1]);
 32 |     let n = bstr.length;
 33 |     const u8arr = new Uint8Array(n);
 34 |     while (n--) {
 35 |         u8arr[n] = bstr.charCodeAt(n);
 36 |     }
 37 |     return new File([u8arr], filename, { type: mime });
 38 | };
 39 | 
 40 | /**
 41 |  * @desc 旋转canvas，会对源数据canvas进行修改
 42 |  * @param {Object} img 图片文件
 43 |  * @param {String} dir 方向 left逆时针|right顺时针
 44 |  * @param {Object} canvas 画布
 45 |  * @param {Number} s 向指定方向旋转几步，1步为90度
 46 |  */
 47 | export const rotateImg = (img, dir = 'right', canvas, s = 1) => {
 48 |     const MIN_STEP = 0;
 49 |     const MAX_STEP = 3;
 50 | 
 51 |     const width = canvas.width || img.width;
 52 |     const height = canvas.height || img.height;
 53 |     let step = 0;
 54 | 
 55 |     if (dir === 'right') {
 56 |         step += s;
 57 |         step > MAX_STEP && (step = MIN_STEP);
 58 |     } else {
 59 |         step -= s;
 60 |         step < MIN_STEP && (step = MAX_STEP);
 61 |     }
 62 | 
 63 |     const degree = step * 90 * Math.PI / 180;
 64 |     const ctx = canvas.getContext('2d');
 65 | 
 66 |     switch (step) {
 67 |     case 1:
 68 |         canvas.width = height;
 69 |         canvas.height = width;
 70 |         ctx.rotate(degree);
 71 |         ctx.drawImage(img, 0, -height, width, height);
 72 |         break;
 73 |     case 2:
 74 |         canvas.width = width;
 75 |         canvas.height = height;
 76 |         ctx.rotate(degree);
 77 |         ctx.drawImage(img, -width, -height, width, height);
 78 |         break;
 79 |     case 3:
 80 |         canvas.width = height;
 81 |         canvas.height = width;
 82 |         ctx.rotate(degree);
 83 |         ctx.drawImage(img, -width, 0, width, height);
 84 |         break;
 85 |     default:
 86 |         canvas.width = width;
 87 |         canvas.height = height;
 88 |         ctx.drawImage(img, 0, 0, width, height);
 89 |         break;
 90 |     }
 91 | };
 92 | 
 93 | /**
 94 |  * @desc 压缩canvas，会对源数据canvas进行修改
 95 |  * @param {Object} img 图片文件
 96 |  * @param {Object} canvas 画布上下文
 97 |  * @param {Number} limitsize 限制的大小
 98 |  * @return {Object} 新大小的宽高，因为如果后续还要处理canvas要使用新的宽高才行{width, height}
 99 |  */
100 | export const compressImg = (img, canvas, limitsize) => {
101 |     if (!limitsize || limitsize <= 0) return;
102 |     const ctx = canvas.getContext('2d');
103 | 
104 |     // 原始图片信息
105 |     const imgSize = img.src.length;
106 |     const width = img.width;
107 |     const height = img.height;
108 | 
109 |     // 压缩比, 保留两位小数
110 |     const ratio = parseFloat(limitsize / imgSize).toFixed(2);
111 |     const ratioWidth = ~~(width * ratio); // 新图片宽度
112 |     const ratioHeight = ~~(height * ratio); // 新图片高度
113 | 
114 |     canvas.width = ratioWidth;
115 |     canvas.height = ratioHeight;
116 |     ctx.drawImage(img, 0, 0, ratioWidth, ratioHeight);
117 | };
118 | 


--------------------------------------------------------------------------------
/components/Images.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="images-component">
  3 |         <div
  4 |             :key="item+index"
  5 |             v-for="(item, index) in items"
  6 |             :style="{backgroundImage: `url(${item}?w=200&h=200)`}"
  7 |             class="images-item images-preview">
  8 |             <i v-if="download" class="images-down" title="下载图片" @click="downloadImg(item)"></i>
  9 |             <i v-if="!disabled" class="images-del" @click="handleDel(item, index)"></i>
 10 |         </div>
 11 |         <div v-if="items.length < limit && ((disabled && items.length < 1) || !disabled)" class="images-item images-add">
 12 |             <Uploader
 13 |                 accept="image/png, image/bmp, image/jpeg, image/jpg, image/gif"
 14 |                 :multiple="multiple"
 15 |                 :disabled="disabled"
 16 |                 :limit="limit"
 17 |                 :limitsize="limitsize"
 18 |                 @on-error="listenUploadError"
 19 |                 @on-success="listenUploadSuccess">
 20 |                 <div class="images-up">
 21 |                     <i class="images-up-icon"></i>
 22 |                     <div class="images-up-text">点击添加图片</div>
 23 |                 </div>
 24 |             </Uploader>
 25 |         </div>
 26 |         <div class="images-number">{{items.length}}/{{limit}}</div>
 27 |     </div>
 28 | </template>
 29 | <script>
 30 | /**
 31 |  * @description 图片上传组件
 32 |  */
 33 | import Uploader from '.Uploader';
 34 | import { dataURLtoFile } from '@/utils/imageUtil';
 35 | 
 36 | export default {
 37 |     name: 'imagesPC',
 38 |     components: { Uploader },
 39 |     props: {
 40 |         id: {
 41 |             type: [String, Number], // 区别多个组件
 42 |             default: '',
 43 |         },
 44 |         limit: {
 45 |             type: Number, // 最多上传几张图片
 46 |             default: 1,
 47 |         },
 48 |         limitsize: {
 49 |             type: Number, // 图片限制大小
 50 |             default: 0,
 51 |         },
 52 |         items: {
 53 |             type: Array, // 初始显示图片的src Array[String]
 54 |             default() {
 55 |                 return [];
 56 |             },
 57 |         },
 58 |         multiple: {
 59 |             type: Boolean, // 是否可多选
 60 |             default: false,
 61 |         },
 62 |         disabled: {
 63 |             type: Boolean, // 是否可修改
 64 |             default: false,
 65 |         },
 66 |         download: {
 67 |             type: Boolean, // 是否可以下载图片
 68 |             default: false,
 69 |         },
 70 |     },
 71 |     methods: {
 72 |         // 文件上传错误
 73 |         listenUploadError(...args) {
 74 |             this.$emit('on-error', this.id, ...args);
 75 |         },
 76 |         // 文件上传成功
 77 |         listenUploadSuccess(urls) {
 78 |             this.$emit('on-success', this.id, urls);
 79 |         },
 80 |         // 删除图片
 81 |         handleDel(item, index) {
 82 |             this.$emit('on-delete', this.id, item, index);
 83 |         },
 84 |         // 图片下载
 85 |         downloadImg(url) {
 86 |             const imgName = url.split('/').slice(-1)[0] || '';
 87 |             this.downloadIamge(url, imgName);
 88 |         },
 89 |         // 下载图片地址和图片名
 90 |         downloadIamge(imgsrc, name) {
 91 |             try {
 92 |                 const image = new Image();
 93 |                 // 解决跨域 Canvas 污染问题
 94 |                 image.setAttribute('crossOrigin', 'anonymous');
 95 |                 image.onload = () => {
 96 |                     // 将图片绘制在canvas上
 97 |                     const canvas = document.createElement('canvas');
 98 |                     canvas.width = image.width;
 99 |                     canvas.height = image.height;
100 |                     const context = canvas.getContext('2d');
101 |                     context.drawImage(image, 0, 0, image.width, image.height);
102 | 
103 |                     // 将canvas转为base64, 得到图片的base64编码数据
104 |                     const url = canvas.toDataURL('image/png');
105 | 
106 |                     // 图片太大，base64会很大，导致a.href放不下，下载网络错误，所以将base64转为本地文件
107 |                     const imageFile = dataURLtoFile(url, name);
108 |                     const imageBlob = URL.createObjectURL(imageFile);
109 | 
110 |                     // 生成一个a元素, 创建一个单击事件
111 |                     const a = document.createElement('a');
112 |                     const event = new MouseEvent('click');
113 | 
114 |                     a.download = name; // 设置图片名称
115 |                     a.href = imageBlob; // 将生成的URL设置为a.href属性
116 |                     a.dispatchEvent(event); // 触发a的单击事件
117 |                 };
118 |                 image.src = imgsrc;
119 |             } catch (e) {
120 |                 console.error(`下载图片失败：${e.toString()}`);
121 |                 window.open(imgsrc);
122 |             }
123 |         },
124 |     },
125 | };
126 | </script>
127 | <style lang="scss" scoped>
128 | @import '../../assets/styles/const-pc';
129 | .images-component {
130 |     overflow: hidden;
131 | }
132 | .images-item {
133 |     float: left;
134 |     width: 120px;
135 |     height: 120px;
136 |     border: 1px solid #E7E7EB;
137 |     border-radius: 2px;
138 |     background-color: #f6f6f6;
139 |     & + .images-item {
140 |         margin-left: 20px;
141 |     }
142 |     &:hover {
143 |         .images-down {
144 |             display: block;
145 |         }
146 |     }
147 | }
148 | .images-preview {
149 |     position: relative;
150 |     background-size: cover;
151 |     background-position: center;
152 | }
153 | .images-del {
154 |     position: absolute;
155 |     top: 5px;
156 |     right: 5px;
157 |     width: 18px;
158 |     height: 18px;
159 |     /* 你自己项目的删除图标按钮 */
160 |     background-image: url('icon-delete.png');
161 |     background-size: cover;
162 |     background-position: center;
163 |     cursor: pointer;
164 | }
165 | .images-down {
166 |     display: none;
167 |     position: absolute;
168 |     top: 40px;
169 |     left: 40px;
170 |     width: 40px;
171 |     height: 40px;
172 |     /* 你自己项目的下载图标按钮 */
173 |     background-image: url('icon-download.png');
174 |     background-size: cover;
175 |     background-position: center;
176 |     cursor: pointer;
177 | }
178 | .images-add {
179 |     font-size: 40px;
180 |     color: #9b9b9b;
181 |     line-height: 100px;
182 |     text-align: center;
183 | }
184 | .images-up {
185 |     position: relative;
186 |     width: 120px;
187 |     height: 120px;
188 |     cursor: pointer;
189 |     .images-up-icon {
190 |         position: absolute;
191 |         top: 0;
192 |         bottom: 20px;
193 |         left: 0;
194 |         right: 0;
195 |         margin: auto;
196 |         width: 40px;
197 |         height: 40px;
198 |         /* 你自己项目的添加图标按钮 */
199 |         background-image: url('icon-add.png');
200 |         background-size: cover;
201 |         background-position: center;
202 |     }
203 |     .images-up-text {
204 |         padding-top: 90px;
205 |         font-size: 14px;
206 |         line-height: 20px;
207 |         color: #333;
208 |     }
209 | }
210 | .images-number {
211 |     float: left;
212 |     position: relative;
213 |     top: 105px;
214 |     margin-left: 20px;
215 |     font-size: 12px;
216 |     color: #333;
217 | }
218 | </style>
219 | 


--------------------------------------------------------------------------------
/components/Uploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="uploader-component" @click="handleClick">
  3 |         <input
  4 |             ref="input"
  5 |             type="file"
  6 |             :multiple="multiple"
  7 |             :accept="accept"
  8 |             :disabled="disabled"
  9 |             @change="handleChange">
 10 |         <slot></slot>
 11 |         <Doing v-if="submiting && loading" />
 12 |     </div>
 13 | </template>
 14 | <script>
 15 | /**
 16 |  * @description 上传组件
 17 |  */
 18 | import Doing from './Doing';
 19 | import { dataURLtoFile, rotateImg, getOrientation, compressImg } from '@/utils/imageUtil';
 20 | 
 21 | export default {
 22 |     name: 'uploaderPC',
 23 |     components: { Doing },
 24 |     props: {
 25 |         multiple: {
 26 |             type: Boolean, // 是否可多选
 27 |             default: false,
 28 |         },
 29 |         limit: {
 30 |             type: Number,
 31 |             default: 1, // 限制文件数量
 32 |         },
 33 |         limitsize: {
 34 |             type: Number, // 限制文件大小(字节 1M = 1024kb = 1024*1024b字节)，设为0表示不限制
 35 |             default: 0,
 36 |         },
 37 |         limitIntercept: {
 38 |             type: Boolean, // 如果有文件超出了大小限制，是否对此次上传做拦截，直接返回onError，当选择非图片类型的时候有用，上传图片类型建议传false，因为我们会对图片进行压缩
 39 |             default: false,
 40 |         },
 41 |         accept: {
 42 |             type: String, // 可接受资源类型
 43 |             default: '*',
 44 |         },
 45 |         action: {
 46 |             type: String, // 上传服务器地址
 47 |             default: '',
 48 |         },
 49 |         disabled: {
 50 |             type: Boolean, // 是否不可用
 51 |             default: false,
 52 |         },
 53 |         loading: {
 54 |             type: Boolean, // 是否显示loading图标
 55 |             default: false,
 56 |         },
 57 |     },
 58 |     data() {
 59 |         return {
 60 |             submiting: false, // 是否在上传中
 61 |         };
 62 |     },
 63 |     computed: {
 64 |         actionUrl() {
 65 |             return this.action || '/fileUpload';
 66 |         },
 67 |     },
 68 |     methods: {
 69 |         /** @desc 选择文件 */
 70 |         handleClick() {
 71 |             if (this.submiting) return;
 72 |             this.$refs.input.click();
 73 |         },
 74 |         /** @desc 选择文件改变 */
 75 |         handleChange(e) {
 76 |             const { files } = e.target;
 77 | 
 78 |             // 未选择文件的时候不做处理
 79 |             if (!files) return;
 80 | 
 81 |             // 上传文件
 82 |             this.uploadFiles(files);
 83 | 
 84 |             // 重置file表单
 85 |             this.$refs.input.value = null;
 86 |         },
 87 |         /** @desc 上传文件 */
 88 |         async uploadFiles(files) {
 89 |             let postFiles = Array.prototype.slice.call(files);
 90 | 
 91 |             // 只取限制的文件数量
 92 |             const limit = this.multiple ? this.limit : 1;
 93 |             postFiles = postFiles.slice(0, limit);
 94 | 
 95 |             // 如果设置了对超过大小的文件进行拦截，则判断文件大小是否在限制内
 96 |             if (this.limitIntercept) {
 97 |                 for (let i = 0, len = postFiles.length; i < len; i += 1) {
 98 |                     if (this.limitsize > 0 && postFiles[i].size > this.limitsize) {
 99 |                         this.$emit('on-error', '大小超出限制', postFiles[i]);
100 |                         return;
101 |                     }
102 |                 }
103 |             }
104 | 
105 |             // 开始上传
106 |             this.submiting = true;
107 | 
108 |             let urlList = await this.upload(postFiles);
109 |             urlList = urlList.filter(item => item.length);
110 | 
111 |             // 结束上传
112 |             this.submiting = false;
113 | 
114 |             // url的列表数量和选择文件的数量不一样则表示上传的时候有文件上传错误，则此次上传无效
115 |             if (urlList.length !== postFiles.length) return;
116 | 
117 |             this.$emit('on-success', urlList);
118 |         },
119 |         /** @desc 批量提交上传的文件 */
120 |         async upload(files) {
121 |             const self = this;
122 |             const urlList = await Promise.all(files.map(async (file) => {
123 |                 const formData = new FormData();
124 | 
125 |                 // 如果当前文件是图片类型，则对图片做一些处理，返回处理后的图片文件流
126 |                 if (/^image/.test(file.type)) {
127 |                     // 对移动端拍照的时候旋转做处理
128 |                     file = await self.imageHandle(file);
129 |                 }
130 | 
131 |                 formData.append('source', file);
132 |                 try {
133 |                     // 提交上传请求
134 |                     // 请在这里写你自己项目的请求方法
135 |                     const data = await self.$request.upload(self.actionUrl, formData);
136 |                     return data.data && data.data.source;
137 |                 } catch (e) {
138 |                     self.$emit('on-error', e.toString(), file);
139 |                     return '';
140 |                 }
141 |             }));
142 |             return urlList;
143 |         },
144 |         /** @desc 图片处理 */
145 |         async imageHandle(file) {
146 |             const self = this;
147 | 
148 |             // 获取图片旋转信息，后面方法会用
149 |             const or = await getOrientation(file, 'Orientation');
150 | 
151 |             return new Promise((resolve, reject) => {
152 |                 // 图片的处理用到了下面这些方法，如果当前系统不支持，就直接返回源文件
153 |                 if (!window.FileReader || !window.atob) return resolve(file);
154 | 
155 |                 // 使用FileReader读取文件流
156 |                 const reader = new FileReader();
157 |                 reader.readAsDataURL(file);
158 |                 /* eslint-disable func-names */
159 |                 // 箭头函数会改变this，所以这里不能用肩头函数
160 |                 reader.onloadend = function () {
161 |                     const result = this.result;
162 |                     const img = new Image();
163 |                     img.src = result;
164 |                     img.onload = function () {
165 |                         const data = self.imageHandleStep(img, or);
166 |                         const f = dataURLtoFile(data);
167 |                         resolve(f);
168 |                     };
169 |                 };
170 |             });
171 |         },
172 |         /** @desc 开始对图片文件进行处理 */
173 |         imageHandleStep(img, or) {
174 |             // 图片的所有处理都是基于canvas的，所以先将图片转为canvas
175 |             const canvas = document.createElement('canvas');
176 |             const ctx = canvas.getContext('2d');
177 | 
178 |             // 图片原始大小
179 |             const width = img.width;
180 |             const height = img.height;
181 |             canvas.width = width;
182 |             canvas.height = height;
183 |             ctx.drawImage(img, 0, 0, width, height);
184 | 
185 |             // step1. 如果设置了图片的大小限制，则对超过大小的图片进行压缩
186 |             const imgSize = img.src.length;
187 |             if (this.limitsize > 0 && imgSize > this.limitsize) {
188 |                 compressImg(img, canvas, this.limitsize);
189 |             }
190 | 
191 |             // step2. 用手机拍照的时候，iphone手机拿的方向不同上传的图片会被旋转，所以需要对旋转的图片转回到正确的方向
192 |             // 不在异常范围内的文件不做旋转处理
193 |             if ([6, 8, 3].indexOf(~~or) > -1) {
194 |                 this.getRotateImg(img, canvas, or);
195 |             }
196 | 
197 |             return canvas.toDataURL('image/png', 1);
198 |         },
199 |         /**
200 |          * @desc 获取旋转后的图片
201 |          * @param {Object} img 图片文件
202 |          * @param {Object} canvas 画布
203 |          * @param {Number} or 旋转信息
204 |          * @param {Object} compressSize 指定宽高
205 |          */
206 |         getRotateImg(img, canvas, or) {
207 |             switch (or) {
208 |             case 6: // 顺时针旋转90度
209 |                 rotateImg(img, 'right', canvas);
210 |                 break;
211 |             case 8: // 逆时针旋转90度
212 |                 rotateImg(img, 'left', canvas);
213 |                 break;
214 |             case 3: // 顺时针旋转180度
215 |                 rotateImg(img, 'right', canvas, 2);
216 |                 break;
217 |             default:
218 |                 break;
219 |             }
220 |         },
221 |     },
222 | };
223 | </script>
224 | <style lang="scss" scoped>
225 | .uploader-component {
226 |     position: relative;
227 | }
228 | input[type="file"] {
229 |     display: none;
230 | }
231 | </style>
232 | 


--------------------------------------------------------------------------------