IO操作
### 文件上传
如何设置弹窗详见 **多场景使用/子页面弹出** , 导入文件弹窗的样式基本基本一致
#### HTML代码
```html
<div class="layboxn">
<h3 class="laytitle f14 b p10">导入</h3>
<div class="p10 linb-fa">
<h3 class="pt10 pb10 g6">操作步骤:</h3>
<p class="mt5 red">1：请您根据标准模板，在模板中依次填写对应的信息，并且按照相关格式填写。</p>
<p class="mt5 red">2：请您上传xls格式文件，并将模板中除了第一行，其他行设置为文本类型。</p>
<p class="mt5 red">3：上传文件为必填项。</p>
<div class="mt10">
<a class="layui-btn" id="exportBtn">
导出模板
</a>
</div>
</div>
<div class="p10 linb-fa">
<h3 class="g6">导入文件:</h3>
<div class="pt20 "><input type="file" id="uploadFile"></div>
</div>
<div class="p15 linb-fa layui-center"><button class="layui-btn" id="uploadData">导入</button></div>
</div>
```
#### JS 代码
依次为 导出模板路径, 接口所需文件名, 上传文件接口地址
```javascript
var exportFile = ''
var fileName = ''
var url = ''
```
导出模板
```JavaScript
$("#exportBtn").attr('href', exportFile) // exportFile为文件名, 需定义
```
上传文件
```javascript
$('#uploadFile').on('change', function (e) {
file = e.originalEvent.target.files[0]
})
```
提交表单
```javascript
$('#uploadData').on('click', function () {
if (file.name.indexOf('xls') == -1) { // 当遇到其他文件格式时, 需修改
onion.layer.tipMsg('上传文件格式有问题')
return
}
var formData = new FormData() // 一定要是FormData()
formData.append(fileName, file) // fileName为key, 根据实际情况来
// 上传文件使用的是 minPost
onion.ajax.minPost(url, formData, function (res) {
if (res.code == onion.networkState.SUCC) {
// 成功代码
} else {
// 失败代码
}
})
})
```
### 文件下载
采用 GET 方法
```javascript
onion.layer.tipMsg('正在下载')
window.location.href = '/manage' + url + '?id=' + data.id
```
### 图片上传
#### HTML 模板
```html
<div class="layboxn mt10">
<h3 class="laytitle p10 f14">图片上传</h3>
<div class="flexbox">
<div class="flexbox jeflex jew50 je-align-center imgUpload p10">
<div class="uploads show flexbox je-align-center g3 je-orient-ver je-text-center" id="uploadLabelImg">
<i class="layui-icon f20"></i>
<p>上传标签图片</p>
</div>
<div class="jeflex photolist" id="previewLabelImg" style="display: none">
<ul class="oveh">
<li class="jepor">
<span class="jepoa layui-btn layui-btn-sm layui-btn-normal imgdel">
<iclass="layui-icon f16"></i>删除
</span>
<img id="labelImg" />
</li>
</ul>
</div>
</div>
</div>
</div>
```
#### JS 代码
```javascript
var labelUrl = ""; // 上传图片的时候使用
onion.upload({
elem: "#uploadLabelDefine",
url: "/common/image/upload",
data: {
type: 9 // type 需按实际情况修改
}
},
function (res) {
var res = res[0];
var data = null;
if (res.code == onion.networkState.SUCC) {
var data = res.data;
dfniPic = data.url;
$("#previewDefImg").show();
$("#labelDefine").attr("src", data.absoluteUrl);
$("#labelDefine")
.prev()
.click(function () {
dfniPic = "";
$("#previewDefImg").hide();
$("#labelDefine").attr("src", "");
});
} else {
onion.layer.tipMsg(res.msg);
}
}
);
```
### 图片回显
```javascript
if (data.labelUrl) {
$("#previewLabelImg").show()
$("#labelImg").attr("src", onion.suffx + data.dfniPic) // suffx为图片前缀
$("#labelDefine")
.prev()
.click(function () {
$("#previewDefImg").hide();
$("#labelDefine").attr("src", "");
})
}
```
### 大图预览
点击图片生效, 弹出展示大图的预览页
在 `img标签` 加上 `onclick="onion.myPreviewImg(this)"` 方法
util.js 中的代码
展示效果
### 图片 hover
鼠标移至图片, 显示小图预览
使用 Jq 中的 `hover()` , 添加 showph 来确定 hover 生效的范围
JS 代码
```javascript
function showphoto() {
$(".showph").hover(
function () {
$(this).find('.img_preview').css("display", "block");
},
function () {
$(this).find('.img_preview').css("display", "none");
}
);
}
```
在合适的地方运行上方函数
