一、文件上传:
<div class="layui-form-item">
<label class="layui-form-label">图片地址</label>
<div class="layui-input-inline">
<button type="button" class="layui-btn" id="imageupload"><i class="layui-icon"></i>上传图片</button>
<input type="hidden" name="image" id="image" value="">
</div>
<label class="layui-form-label">下载地址</label>
<div class="layui-input-inline">
<button type="button" class="layui-btn" id="fileupload"><i class="layui-icon"></i>上传文件</button>
<input type="hidden" name="download" id="download" value="">
</div>
</div>
<!--文件上传-->
<script>
layui.use('upload', function(){
var upload = layui.upload;
upload.render({ //图片上传
elem: '#imageupload' //绑定元素
,url: '/wuxia/book/uploadimages' //上传接口
,done: function(res){
//上传完毕回调
if(res.msg){
$('#image').val(res.data);
layer.msg("图片上传成功",{icon:1});
}else{
layer.msg("图片上传失败",{icon:2});
}
}
});
upload.render({ //文件上传
elem:'#fileupload'
,url:"/wuxia/book/uploadbook"
,accept:'file'
,done:function(res){
if(res.msg){
$('#download').val(res.data);
layer.msg("文件上传成功",{icon:1})
}else{
layer.msg("文件上传失败",{icon:2})
}
}
});
});
</script>
后台:
@ApiOperation(value="上传图片")
@PostMapping("/uploadimages")
public @ResponseBody Map uploadimages(@RequestParam("file") MultipartFile file, HttpServletRequest request){
boolean msg;
String savePath = null;
String image=null;
try{
String oldFileName=file.getOriginalFilename();
String bookimages=UUID.randomUUID().toString().replaceAll("-","");//使用UUID命名防重复
String prefix=oldFileName.substring(oldFileName.lastIndexOf("."));//得到文件名后缀
// 1.保存在项目文件里
//得到项目名
String name=request.getServletContext().getContextPath();
//得到当前文件的物理地址
String realPath=request.getSession().getServletContext().getRealPath("/");
//保存文件的地址
String path = realPath+"files\\images\\bookimages\\"+bookimages;
savePath=path+prefix;
System.out.println(realPath);
File savefile = new File(savePath);
file.transferTo(savefile);
//数据库保存的路径:
image = name+"/files/images/bookimages/"+bookimages+prefix;
msg=true;
}catch (Exception e){
msg=false;
}
Map<String,Object> map=new HashMap<>();
map.put("data",image);
map.put("msg",msg);
return map;
}
@ApiOperation(value="上传书籍")
@PostMapping("/uploadbook")
public @ResponseBody Map uploadbook(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {
Boolean b = false;
String path=null;
try{
//获得文件名
String oldFileName=file.getOriginalFilename();
//获取应用的真实根路径
String realPath= request.getSession().getServletContext().getRealPath("/");
//创建带文件名的真实路径
// path = realPath+"files\\books\\"+oldFileName;
path="D:\\data\\book\\"+oldFileName;
// 判断文件是否存在,存在删除旧文件
File deleteFile = new File(path);
if(deleteFile.exists()){
deleteFile.delete();
}
//保存文件
File savefile=new File(path);
file.transferTo(savefile);
b=true;
}catch(Exception e){
b=false;
}
Map<String,Object> map=new HashMap<>();
map.put("code", "0");
map.put("data",path);
map.put("msg",b);
return map;
}
二、文件下载:
前端:HTML,JS
可以使用form表单提交,或是window.open(),a标签跳转,不能使用ajax提交。
由于是JS动态加载的数据,所以把参数绑定当前列的属性上了:
<button class="layui-btn layui-btn-small layui-btn-primary download" download="'+list[i].download+'" bookname="'+list[i].bookname+'">下载</button>
//下载书籍
$(document).on("click",".download",function(){
var bookname=$(this).attr("bookname");
var download=$(this).attr("download");
if(ff.isEmpty(download)){
layer.alert("此资源无法下载");
}else{
//第一种:form 表单提交
var url="/wuxia/book/downloadbook";
var form = $('<form method="GET" action="' + url + '">');
form.append($('<input type="hidden" name="download" value="'+download+'">'));
form.append($('<input type="hidden" name="bookname" value="'+bookname+'">'));
$('body').append(form);
form.submit();
}
})
后台:Java处理
@ApiOperation(value="下载书籍")
@GetMapping("/downloadbook")
public void downloadbook(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value="download",defaultValue="")String download,
@RequestParam(value="bookname")String bookname){
System.out.println(download+","+bookname);
File file = new File(download);//得到文件
String FileName =file.getName();
response.setCharacterEncoding(request.getCharacterEncoding());
InputStream inputStream = null;
OutputStream outputStream = null;
try {
response.setContentType("application/x-download");//应用程序强制下载
response.addHeader("Content-Disposition","attachment;fileName="+ URLEncoder.encode(FileName, "UTF-8"));
inputStream = new FileInputStream(file);
outputStream = response.getOutputStream();
IOUtils.copy(inputStream,outputStream);
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
}
}
LayUI 实现文件下载:
<script type="text/html" id="download">
<a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
</script>
//监听行内工具栏
table.on('tool(search)', function(obj){
var data = obj.data;//获得当前行数据
var tr =obj.tr;//获取当前行tr的DOM对象
if(obj.event==='download'){
var url="/wuxia/book/downloadbook";
var form = $('<form method="GET" action="' + url + '">');
form.append($('<input type="hidden" name="download" value="'+data.download+'">'));
form.append($('<input type="hidden" name="bookname" value="'+data.bookname+'">'));
$('body').append(form);
layer.confirm('即将下载书籍?', {
btn: ['确定','取消'] //按钮
}, function(){
form.submit();
layer.msg('正在下载', {icon: 1});
}, function(){
layer.msg('好的');
});
}
}