好资源导航 » 文章资讯 » layui上传图片到服务器的非项目目录下的方法

layui上传图片到服务器的非项目目录下的方法

2023-08-13 13:22:03 70

1、layui没办法与form表单中的其他字段一同提交到后台，所以只能通过先提交图片，然后通过返回的图片的值来提交到数据库

2、先将所需要的jar包导入，我是用的maven所以，需要在父pom.xml文件中添加下面两个jar包（版本自己选择）


commons-fileupload
commons-fileupload
1.3.1


commons-io
commons-io
2.4

3、然后编写前台页面

如果只需要上传一张图片可以看上传logo的步骤，多张的话可以看上传图片的步骤


logo


选择logo





开始上传

图片

选择图片

开始上传

上图中input和img的目的是为了可以接收返回值，从而在提交时可以将图片信息上传到后台



//上传logo
layui.use('upload',function(){
var$=layui.jquery,
upload=layui.upload;

//选完文件后不自动上传
upload.render({
elem:'#uploadLogo',
url:'${ctx}/upload/uploadLogoToServer.do',
auto:false,
//multiple:true,
choose:function(obj){
console.log(obj)
//预读本地文件示例，不支持ie8
obj.preview(function(index,file,result){
$('#upload-logo').attr('src',result);//图片链接（base64）
$("#img_url").attr('value',result);
});
},
bindAction:'#submit_logo',
done:function(res){
$("#logoText").attr('value',res.url);
console.log(res)
returnlayer.msg(res.msg,{icon:res.status,time:2000});
}
});

//上传图片
varfileCount=0;//控制文件数量
varmaxFileCount=2;//文件上传最大数量，如果没有限制上传文件的数量则不需要
varmaxFileSize=20;//文件上传最大大小
varresultValue=0;
varurl="";
upload.render({
elem:'#uploadImage',
url:'${ctx}/upload/uploadImageToServer.do',
auto:false,
//multiple:true,
choose:function(obj){
varfiles=this.files=obj.pushFile();//将每次选择的文件追加到文件队列
//layer.load();
console.log(obj)
//预读本地文件示例，不支持ie8
obj.preview(function(index,file,result){
fileCount++;
if(fileCount>maxFileCount){
fileCount=maxFileCount;
layer.msg('文件数量不得超过'+maxFileCount+'个',{icon:2});
return;
}
//在当前ID为“imageView”的区域显示图片
$('#imageView').append('')
});
},
bindAction:'#submit_image',
done:function(res){
if(resultValue<2){
url=url+res.url+",";
}
if(resultValue==1){
$("#imageText").attr('value',url);
}
resultValue++;
console.log(res)
returnlayer.msg(res.msg,{icon:res.status,time:2000});
}
});
});

4、因为layui在上传多张图片的时候是通过多次请求传递过去，所以是数据是一条一条的接收的，如果你需要回显，那么就需要在后台进行拼接，不拼接很可能会出现只传返回一张图片的信息

UploadCollect

@RequestMapping(value="/uploadImageToServer.do")
@ResponseBody
publicResultMsginsertImageToEducational(@RequestParam(value="file")MultipartFile[]files)throwsException{
ResultMsgmsg=newResultMsg();
Stringurl="";
for(inti=0,length=files.length;i
FileUpload
publicstaticStringuploadFile(MultipartFilemultipartFile,Stringpath)throwsException{
Filefile=newFile(path);
if(!file.exists()){
file.mkdirs();
}
FileInputStreamfileInputStream=(FileInputStream)multipartFile.getInputStream();
StringfileName=UUID.randomUUID()+multipartFile.getOriginalFilename();
BufferedOutputStreambos=newBufferedOutputStream(newFileOutputStream(path+File.separator+fileName));
byte[]bs=newbyte[1024];
intlen;
while((len=fileInputStream.read(bs))!=-1){
bos.write(bs,0,len);
}
bos.flush();
bos.close();
returnfileName;
}
5、这就是图片上传的步骤
以上这篇layui上传图片到服务器的非项目目录下的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

layui上传图片到服务器的非项目目录下的方法

热门推荐

随机推荐