layui 图片上传,多图上传。auto=false 的时候 图片会重复上传
时间: 2024-03-18 15:44:15 浏览: 18
在 layui 中,当使用多图上传并设置 `auto=false` 时,图片会在选择后立即上传到服务器。如果用户多次选择同一张图片并上传,那么该图片会被重复上传多次。
为了避免这种情况,您可以在上传前检查图片是否已经被上传过。可以通过记录已上传的图片名或者哈希值来实现。当用户再次选择同一张图片上传时,先判断该图片是否已经被上传过,如果已经上传过则不再重复上传,否则再进行上传操作。这样可以避免图片的重复上传。
相关问题
layui 图片上传,多图上传。auto=false 的时候,图片删除不了
在 layui的多图上传中,如果设置`auto`为`false`,则上传图片需要手动触发。而删除图片的操作需要通过发送ajax请求来实现。如果删除图片不成功,可能是以下几个原因:
1. 后端接口未正确实现删除功能,需要检查后端代码;
2. 前端发送的ajax请求未正确传递参数,需要检查前端代码;
3. 删除操作发送的请求未能正确到达后端接口,可能是请求路径不正确或者权限问题,需要检查请求路径和后端接口权限。
建议检查以上几个方面,找出问题所在,并进行相应的调整。
layui 图片上传的时候,设置多图,并且 auto 设置为false如何让选择的图片显示在页面上
在 layui中,图片上传设置多图并且auto设置为false后,可以通过监听上传事件,获取上传成功后的图片信息,然后将图片信息动态添加到页面上。
具体实现方式如下:
1. 在页面中设置一个用于显示图片的容器,例如:
```html
<div id="images"></div>
```
2. 在图片上传组件中设置多图,并且auto设置为false,例如:
```javascript
layui.use('upload', function(){
var upload = layui.upload;
upload.render({
elem: '#test'
,url: '/upload/'
,multiple: true //设置多图
,auto: false //不自动上传
,bindAction: '#submit' //指定上传按钮
,done: function(res){
console.log(res);
}
});
});
```
3. 监听上传事件,获取上传成功后的图片信息,并将图片信息动态添加到页面上,例如:
```javascript
layui.use('upload', function(){
var upload = layui.upload;
upload.render({
elem: '#test'
,url: '/upload/'
,multiple: true //设置多图
,auto: false //不自动上传
,bindAction: '#submit' //指定上传按钮
,choose: function(obj){
//将选择的图片动态添加到页面上
var imagesContainer = document.getElementById('images');
var files = obj.pushFile();
layui.each(files, function(index, file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
var img = document.createElement('img');
img.src = this.result;
imagesContainer.appendChild(img);
}
});
}
,done: function(res){
console.log(res);
}
});
});
```
这样,选择的图片就会动态添加到页面上了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)