效果展示
1.JSP代码
<textarea id="text" style="display: none">请输入文本</textarea>
2.JS代码
layui.use('layedit', function(){
var layedit = layui.layedit;
//layedit.set要放在build的上面
layedit.set({
uploadImage: {
url: '/uplaod/uploadFile' //接口url
,type: 'post' //默认post
}
});
var text = layedit.build('text',{
height: 700});
3.Controller
@Controller
@RequestMapping("/uplaod")
public class UploadController {
//上传文件
@ResponseBody
@RequestMapping(value = "/uploadFile")
public Map uploadFile(HttpServletRequest request, @Param("file") MultipartFile file) throws IOException {
Map<String, Object> map = new HashMap<>();
Map<String, Object> map2 = new HashMap<>();
if (file != null) {
String webapp = request.getServletContext().getRealPath("/");
try {
String substring = file.getOriginalFilename();
// 图片的路径+文件名称
String fileName = "/static/upload/" + substring;
System.out.println(fileName);
// 图片的在服务器上面的物理路径
File destFile = new File(webapp, fileName);
// 生成upload目录
File parentFile = destFile.getParentFile();
if (!parentFile.exists()) {
parentFile.mkdirs();// 自动生成upload目录
}
// 把上传的临时图片,复制到当前项目的webapp路径
FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(destFile));
map = new HashMap<>();
map2 = new HashMap<>();
map.put("code", 0);//0表示成功,1失败
map.put("msg", "上传成功");//提示消息
map.put("data", map2);
map2.put("src", fileName);//图片url
map2.put("title", substring);//图片名称,这个会显示在输入框里
} catch (Exception e) {
e.printStackTrace();
}
}
return map;
}
}