layui如何上传图片到服务器的非项目目录下-创新互联
小编给大家分享一下layui如何上传图片到服务器的非项目目录下，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联公司专业为企业提供
南芬网站建设、南芬做网站、南芬网站设计、南芬网站制作等企业网站建设、网页设计与制作、南芬企业网站模板建站服务，10多年
南芬做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
1、layui没办法与form表单中的其他字段一同提交到后台，所以只能通过先提交图片，然后通过返回的图片的值来提交到数据库
2、先将所需要的jar包导入，我是用的maven所以，需要在父pom.xml文件中添加下面两个jar包（版本自己选择）
commons-fileupload
commons-fileupload
1.3.1
commons-io
commons-io
2.4
3、然后编写前台页面
如果只需要上传一张图片可以看上传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)
return layer.msg(res.msg,{icon: res.status,time: 2000});
}
});
//上传图片
var fileCount = 0;//控制文件数量
var maxFileCount = 2;//文件上传大数量，如果没有限制上传文件的数量则不需要
var maxFileSize = 20;//文件上传大大小
var resultValue = 0;
var url = "";
upload.render({
elem: '#uploadImage',
url: '${ctx}/upload/uploadImageToServer.do',
auto: false,
//multiple: true,
choose: function(obj){
var files = 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)
return layer.msg(res.msg,{icon: res.status,time: 2000});
}
});
});
4、因为layui在上传多张图片的时候是通过多次请求传递过去，所以是数据是一条一条的接收的，如果你需要回显，那么就需要在后台进行拼接，不拼接很可能会出现只传返回一张图片的信息
UploadCollect
@RequestMapping(value = "/uploadImageToServer.do")
@ResponseBody
public ResultMsg insertImageToEducational(@RequestParam(value = "file")MultipartFile[] files) throws Exception {
ResultMsg msg = new ResultMsg();
String url = "";
for (int i=0,length = files.length; i < length; i++) {
if(files[i] != null && !files[i].isEmpty()) {
//获取路径，路径我写的是固定路径，直接映射到服务器根目录下的/usr/Images/logo
String upload_path = IMAGE_ROOT_URL;
String upload_fileName = FileUpload.uploadFile(files[i], upload_path);
msg.setStatus(0);
url = url + upload_fileName;
}else {
msg.setStatus(1);
msg.setMsg("上传失败");
msg.setUrl("给一个失败的图片路径");
return msg;
}
}
msg.setStatus(1);
msg.setMsg("上传成功");
msg.setUrl(url);
return msg;
}FileUpload
public static String uploadFile(MultipartFile multipartFile, String path) throws Exception {
File file = new File(path);
if (!file.exists()) {
file.mkdirs();
}
FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream();
String fileName = UUID.randomUUID() + multipartFile.getOriginalFilename();
BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path + File.separator + fileName));
byte[] bs = new byte[1024];
int len;
while ((len = fileInputStream.read(bs)) != -1) {
bos.write(bs, 0, len);
}
bos.flush();
bos.close();
return fileName;
}5、这就是图片上传的步骤
看完了这篇文章，相信你对“layui如何上传图片到服务器的非项目目录下”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
名称栏目：layui如何上传图片到服务器的非项目目录下-创新互联
本文地址：http://njwzjz.com/article/deohid.html
![]()
