Layui实现图片上传到本地文件夹
时间: 2023-11-08 09:30:12 浏览: 114
要实现Layui图片上传到本地文件夹,可以使用Layui的upload模块。以下是一个简单的示例代码:
HTML代码:
```
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>
```
JavaScript代码:
```
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
$('#demo1').attr('src', res.url); //将上传后的图片路径赋值给img标签
}
,error: function(){
//请求异常回调
}
});
});
```
其中,`upload.render` 方法中的 `url` 参数需要设置为服务器端接口地址,用于接收上传的图片并保存到本地文件夹中。在服务器端,可以使用 PHP、Java、Node.js 等技术来实现文件上传和保存。具体实现方式可以参考相关技术文档。
阅读全文