好的，我可以为您提供一个简单的
layui+ssm
上传图片保存到文件夹并记录到数据库的代码示例。
前端页面代码：
```html
<div class="
layui-upload">
<button type="button" class="
layui-btn" id="uploadBtn">
上传图片</button>
<div class="
layui-upload-list">
<img class="
layui-upload-img" id="uploadImg">
<p id="uploadText"></p>
</div>
</div>
```
其中，`
layui-upload` 是
layui 自带的
上传组件，`
layui-btn` 是
layui 的按钮样式。
然后，我们需要引入
layui 的
上传组件和表单组件，并且在 JavaScript 中配置
上传接口和回调函数：
```javascript
layui.use(['upload', 'form'], function(){
var upload =
layui.upload;
var form =
layui.form;
//执行
上传图片操作
var uploadInst = upload.render({
elem: '#uploadBtn', //绑定元素
url: '/upload', //
上传接口
done: function(res){
//
上传成功后的回调函数
console.log(res);
if(res.code == 0){
//
上传成功，显示图片
$('#uploadImg').attr('src', res.data.src); //图片链接（base64）
$('#uploadText').html(res.msg);
//将图片路径存入隐藏域中，方便后台获取
$('#imgPath').val(res.data.path);
} else {
//
上传失败
$('#uploadText').html(res.msg);
}
},
error: function(){
//请求异常的回调函数
$('#uploadText').html('
上传失败，请重试！');
}
});
//监听表单提交
form.on('submit(saveBtn)', function(data){
//表单提交时，将图片路径提交到后台
var imgPath = $('#imgPath').val();
if(!imgPath){
layer.msg('请先
上传图片');
return false;
}
data.field.imgPath = imgPath;
//此处省略其他表单项的验证和提交操作
//……
});
});
```
在后端代码中，我们需要定义一个
上传接口 `/upload`，并在该接口中实现
图片上传、保存到文件夹和记录到数据库的操作。这里我使用了 SpringMVC 框架和 Commons FileUpload 组件来实现
文件上传操作，使用了 MyBatis 框架来实现数据库操作。
后端代码：
```java
@Controller
public class UploadController {
@Autowired
private ProductService productService;
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Result upload(@RequestParam("file") MultipartFile file) {
Result result = new Result();
String fileName = file.getOriginalFilename();
String fileType = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if (!"jpg".equals(fileType) && !"jpeg".equals(fileType) && !"png".equals(fileType) && !"gif".equals(fileType)) {
//文件格式不支持
result.setCode(-1);
result.setMsg("文件格式不支持");
return result;
}
String filePath = "D:/upload/"; //文件存储路径，根据实际情况修改
File destFile = new File(filePath + fileName);
try {
file.transferTo(destFile); //保存文件到本地
} catch (IOException e) {
e.printStackTrace();
result.setCode(-1);
result.setMsg("
文件上传失败，请重试");
return result;
}
//保存图片到数据库
Product product = new Product();
product.setImgPath(destFile.getPath());
productService.addProduct(product);
//返回结果
result.setCode(0);
result.setMsg("
上传成功");
Map<String, Object> data = new HashMap<>();
data.put("src", "data:image/" + fileType + ";base64," + Base64Utils.encodeToString(file.getBytes())); //返回 base64 编码的图片数据
data.put("path", destFile.getPath()); //返回图片存储路径
result.setData(data);
return result;
}
}
```
其中，`ProductService` 是一个用于处理产品信息的 Service，`addProduct()` 方法用于将产品信息保存到数据库中。`Result` 是一个自定义的返回结果类，用于封装
上传操作的返回结果。
注意：由于这里使用了绝对路径来存储文件，所以需要确保
上传目录存在，并且具有写权限。
这就是一个简单的
layui+ssm
上传图片保存到文件夹并记录到数据库的代码示例，希望能够对您有所帮助。
本文介绍了如何结合LayUi前端框架和PHP后端技术，实现多图片上传功能，包括在本地进行预览。详细阐述了js部分的文件选择与上传逻辑，以及php部分的接收与处理文件的方法，并展示了最终实现的效果。
最低0.47元/天 解锁文章
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
