使用原生<input type="file">
上传图片、预览、删除;multiple
实现可上传多张
参数名 | 类型 | 说明 |
---|---|---|
fileTypes | Array | 文件类型, 默认'jpeg','bmp','gif','jpg' |
limit | Number | 限制数量,默认5 |
size | Number | 最大图片大小,默认5M |
@imgs | Object | 上传的图片文件 |
html部分
js部分
css部分
.upload-imgs{margin: 10px 0 30px 0;overflow: hidden;font-size: 0;}.upload-imgs li{position: relative;width: 118px;height: 118px;font-size: 14px;display: inline-block;padding: 10px;margin-right: 25px;border: 2px dashed #ccc;text-align: center;vertical-align: middle;}.upload-imgs li:hover{border-color: $them-color;}.upload-imgs .add{display: block;background-color: #ccc;color: #ffffff;height: 94px;padding: 8px 0;}.upload-imgs .add .iconfont{padding: 10px 0;font-size: 40px;}.upload-imgs li:hover .add{background-color: $them-color;}.upload-imgs li .upload{position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 118px;height: 118px;}.upload-imgs .img{position: relative;width: 94px;height: 94px;line-height: 94px;}.upload-imgs .img img{vertical-align: middle;}.upload-imgs .img .close{display: none;}.upload-imgs li:hover .img .close{display: block;position: absolute;right: -6px;top: -10px;line-height: 1;font-size: 22px;color: #aaa;}