layui上传
- layui版本
- 项目引入
- 页面引入
- java后台接收
- 参考文献
layui版本
首先先下载layui-2.5.6.zip包，解压后选择自己用到的文件放入项目中。
项目引入
我的项目中只用到了upload功能，其他未使用，所以引入如下：
页面引入
具体页面代码如下add.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增钉钉工作通知消息模板')" />
<link href="../static/layui/layui.css" th:href="@{/layui/layui.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-msgTemplet-add">
<div class="form-group">
<label class="col-sm-3 control-label"><span style="color: red">*</span>模板名称：</label>
<div class="col-sm-8">
<input id="templetName" name="templetName" class="form-control" type="text" th:required="true">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><span style="color: red">*</span>模板类型：</label>
<div class="col-sm-8">
<select id="templetType" name="templetType" class="form-control m-b" required onchange="showBtn()">
<option value="text">文本</option>
<option value="image">图片</option>
<option value="file">文件</option>
</select>
</div>
</div>
<div class="form-group hide" id="uploadbtn">
<label class="col-sm-3 control-label"><span style="color: red">*</span>媒体文件：</label>
<div class="col-sm-8">
<button type="button" class="layui-btn" id="uploadfile">上传文件</button>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><span style="color: red">*</span>模板内容：</label>
<div class="col-sm-8">
<textarea id="content" name="content" class="form-control" type="text" th:required="true" ></textarea>
</div>
</div>
</form>
</div>
<div th:include="include::footer"></div>
<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
var prefix = ctx + "project/msgTemplet";
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
uploadInst = upload.render({
elem: '#uploadfile' //绑定元素
});
});
function showBtn() {
var type = $("#templetType").val();
if (type == "image" || type == "file") {
$("#content").attr("readonly",true);
$("#uploadbtn").removeClass('hide');
uploadInst.reload({
elem: '#uploadfile' //绑定元素
,url: prefix + '/upload/' //上传接口
,data: {type: type}
,accept:'file'
,done: function(res){
//上传完毕回调
if (res.code == 0) {
$("#content").val(res.data);
layer.msg(res.msg);
}else {
layer.msg(res.msg);
}
}
,error: function(){
//请求异常回调
layer.msg('上传失败！');
}
});
}else {
$("#content").attr("readonly",false);
$("#uploadbtn").addClass('hide');
}
}
$("#form-msgTemplet-add").validate({
rules:{
xxxx:{
required:true,
},
},
focusCleanup: true
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-msgTemplet-add').serialize());
}
}
</script>
</body>
</html>
页面效果如下
java后台接收
代码如下：controller代码
@RequestMapping( "/upload")
@ResponseBody
public AjaxResult upload(MultipartFile file,HttpServletRequest request)
{
try {
String type = request.getParameter("type");
OapiMediaUploadResponse rsp = dingDingService.uploadMedia(type,file);
if (rsp.isSuccess()) {
return new AjaxResult(AjaxResult.Type.SUCCESS,"上传成功！",rsp.getMediaId());
}else {
return new AjaxResult(AjaxResult.Type.ERROR,rsp.getErrmsg());
}
} catch (Exception e) {
e.printStackTrace();
}
return error();
}
service代码：
/**
* 调用钉钉上传文件
* （1） 图片（image）:1MB，支持JPG格式
* （2）语音（voice）：2MB，播放长度不超过60s，AMR格式
* （3）普通文件（file）：10MB
* @param type 文件类型 image file (voice暂不支持)
* @param file 文件
* @return
*/
@Override
public OapiMediaUploadResponse uploadMedia(String type, MultipartFile file) {
try {
//获取企业凭证 access_token
String accessToken = getAccessToken();
DingTalkClient client = new DefaultDingTalkClient("https://oapi.dingtalk.com/media/upload");
OapiMediaUploadRequest req = new OapiMediaUploadRequest();
req.setType(type);
req.setMedia(new FileItem(file.getOriginalFilename(),file.getInputStream()));
OapiMediaUploadResponse rsp = client.execute(req, accessToken);
return rsp;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
这里的上传是调用钉钉服务上传文件
参考文献