上传图片
## onion.upload
### 1. 功能
用于图片上传
### 2. 使用场景
表单中需要上传图片时
### 3. 如何使用
==在表单中使用该功能==
#### 3.1 HTML与CSS模板
```html
<!--form表单内-->
<div class="layboxn mt10">
<h3 class="laytitle p10 f14">证件图片</h3>
<div class="upload p10 bline">
<button type="button" class="layui-btn" id="uploadImg">
<i class="layui-icon"></i>上传图片
</button>
</div>
<div class="ggImglist">
<ul class="layui-row" id="previewList"></ul>
</div>
</div>
```
```css
.ggImglist li{width:150px;float:left;border-bottom:dotted #dfdfdf 1px;border-right:dotted #dfdfdf 1px;}
.ggImglist li .imgdel{top:0;right:0;background-color:#f2f2f2;width:20px;height:20px;display:block;font-size:16px;line-height:20px;text-align: center; }
.ggImglist li .layui-input{width:80px;}
.ggImglist li .imgdel:hover{cursor:pointer;color:#fff;background-color:rgb(0, 150, 136)}
```
#### 3.2 触发上传图片按钮
```javascript
onion.upload({elem: '#uploadImg', url: '/common/image/upload', data: {type: 16}}, function (res) {
var res = res[0];
if (res.code == onion.networkState.SUCC) {
$('#previewList').append(renderImg(res.data));
delImg();
form.render();
} else {
onion.layer.tipMsg(res.msg);
}
})
```
#### 3.3 渲染图片展示列表
```javascript
function renderImg(data) {
var random = onion.random(8);
// 数据回显
if (data.warehouseId) {
var temp = '<li class="flexbox je-align-center pt10 pb10" id="' + data.warehouseId + '">' +
' <div class="ml10 jepor">' +
' <i class="layui-icon imgdel jepoa" >ဆ</i>' +
' <img data-lePicUrl="' + data.idPicUrl + '" src="' + onion.suffx + (data.idPicUrl) + '" width="100" height="100" alt="">' +
' </div>' +
' </li>';
} else { // 新增
var temp = '<li class="flexbox je-align-center pt10 pb10" id="' + data.warehouseId + '">' +
' <div class="ml10 jepor">' +
' <i class="layui-icon imgdel jepoa" >ဆ</i>' +
' <img data-lePicUrl="' + data.url + '" src="' + onion.suffx + (data.url || data.idPicUrl) + '" width="100" height="100" alt="">' +
' </div>' +
' </li>';
}
return temp;
}
```
#### 3.4 获取图片数据, 以实际接口内容为准
```javascript
getProductDetail(id);
function getProductDetail(id) {
onion.ajax.post('/goods/warehouse/uploadInfo?id='+id,
function (res) {
if (res.code == onion.networkState.SUCC) {
var data = res.data;
renderSpecal(data);
}
}
})
}
```
#### 3.5 渲染上传图片
```javascript
function renderSpecal(data) {
var idPicUrls = data;
for (var i = 0; i < idPicUrls.length; i++) {
$('#previewList').append(renderImg(idPicUrls[i]));
delImg();
}
}
```
#### 3.6 图片删除操作
```javascript
function delImg() {
$('#previewList .imgdel').on('click', function () {
$(this).parent().parent().remove();
})
}
```
#### 3.7 通过表单, 上传图片内容
```javascript
// 写在提交form.on 内
var idPicUrls = [];
var imgs = $('#previewList').find('img') ;
imgs.each(function(idx, each){
idPicUrls.push($(each).attr('data-lePicUrl'))
})
if(idPicUrls.length == 0 ){
onion.layer.tipMsg('请添加图片');
return false;
}
```
### 4. api定义
``` javascript
onion.upload = function (options, callback) {
var defaultOpts = {
elem: '',
url: '',
data: {},
accept: 'images',
acceptMime: 'image/*',
done: function () {
var args = arguments;
callback && callback(args);
},
error: function () {
var args = arguments;
callback && callback(args);
}
}
var currentOpts = $.extend({}, defaultOpts, options || {});
currentOpts.url = onion.onionUrl + currentOpts.url;
return upload.render(currentOpts)
}
```