layui-upload图片上传组件一次记录

最新推荐文章于 2023-08-29 00:02:36 发布

原创最新推荐文章于 2023-08-29 00:02:36 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

Web前端笔记专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了layui框架中图片上传组件的使用方法，特别关注了多文件上传时可能遇到的文件队列溢出问题，并提供了相应的解决代码示例。

<!--图片上传组件-->
			<div class="layui-upload">
				<!--触发按钮-->
				<button type="button" class="layui-btn btn-success " id="test2" style="border:none;border-radius: 3px;height: 32px;margin-left: 30px;">资产附图上传</button>
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;border: 5px solid #eee !important;margin-left: 30px;width: 78%;height: 230px;" id="preview">
					预览图：
					<div class="layui-upload-list" id="demo2"></div>
				</blockquote>
			</div>

html代码如上，可详细见官网示例，这里是多文件上传（图片）示例：

容易出问题的地方是文件多次选择，layui的组件回出现文件溢出，就是图片多次选择的累加，注意在恰当时候使用：

for(var temp in files)
						{
							delete files[temp];   //清空文件队列
						}

来清空文件队列！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

晴天小风

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用layui进行多图片上传，带预览和删除

UPCTO

06-02

1857

使用layui进行多图片上传，带预览和删除 = 不知道是不是移植到我系统才有这个情况，不过通过代码来看，应该是 ID没有更新的BUG ==这里，单张没有问题，但是多张就会出现之显示一张图片的情况，如下图。== 原文代码 ==

layui 单图上传、多图上传、上传视频

qq_19591849的博客

02-03

2341

layui 单图上传、多图上传、上传视频

参与评论您还未登录，请先登录后发表或查看评论

文件 / 图片上传通用版

Ai卿的博客

10-11

372

HTML和JS官网有：https://www.layui.com/demo/upload.html java函数可以用通用上传方式，我写了个文件记录表，所以写了个通用的，文件图片都可以，JS限制就可以了。 /** * 文件上传下载操作处理 * * @author admin * @date Mon Oct 07 09:45:29 CST 2019 */ @Controller...

Layui图片上传组件使用指南

小马同学

02-11

8246

前言 Layui是一套非常棒的前端框架，页面简约美观，关键是非常容易上手，在开发中也是很多项目的首选。之前用Layui做过开发，现在整理一下Layui的文件上传组件，Layui上传组件页面效果看起来非常舒服，简约美观。之前也用过Bootstrap的上传组件，这两款上传组件平分秋色，各有各的特点，总而言之，都是很实用而且很美观的上传组件，想了解BootStrap上传组件的请移步：BootStrap ...

使用layui的upload组件上传图片到七牛云

qq_43694194的博客

09-24

888

*accept:**指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）设定文件域的字段名（这里要和接口里的@RequestParam(“myFileName”)注解里的“myFileName对应”）accessKey和 accessKey都是与七牛云密钥相关的，自己去七牛云的个人中心的密钥管理可以拿到。bucket表示空间名，url是域名（创建七牛云创建实例空间会默认分配一个测试域名，有效期为30天时间）这里我是用的是按钮。

图片/文件上传 - layui.upload

Les_Wu

03-28

9449

图片/文件上传 - layui.upload普通上传文件是借助 type="file" 的 input 标签来完成的, 这太low了本文是利用 layui 做两种情况下的图片上传 服务器端是ThinkPHP3.2实例一: (点击上传即保存数据库)upload.html<!DOCTYPE html> <html> <head> <meta charse...

layui上传图片

Bronna的博客

12-15

6449

一、controller代码@RequestMapping(value = "/uploadImg", method = RequestMethod.POST) public void uploadImg(HttpSession session, HttpServletRequest request, HttpServletResponse response) thr

layui(1.0.9)文件上传upload,前后端的实例代码

10-16

Layui是一个前端UI框架，支持各种丰富的网页界面组件，其中文件上传功能是网页开发中常见的需求。在Layui 1.0.9版本中，提供了简洁而强大的文件上传组件，使得文件上传的前端操作变得方便快捷。这篇分享文章详细介绍...

layui-Excel.rar

05-18

在“layui-Excel.rar”中，图片上传后可能还会涉及到图片的存储和数据库记录，以便于后续的数据管理和展示。 3. Excel数据处理： “layui-Excel.rar”中可能包含对Excel数据的读取和写入功能。在PHP环境中，可以...

基于layui.upload.js 拖拽文件/文件夹上传下载

camel_gold的博客

05-16

2757

layui.upload.js 拖拽文件/文件夹上传下载

layui实现文件或图片上传记录

10-18

Layui是一个基于jQuery的前端UI框架，它提供了简单易用的模块化组件，其中文件上传组件是较为常用的功能之一。在Web开发中，实现文件或图片的上传并记录上传过程中的各种状态是非常常见的需求。本文将详细介绍如何...

Layui多图上传

收破烂的小熊猫

07-15

8607

Layui多图上传最近制作经销商上传附件需要实现一个多图上传的功能，前端使用的是layui框架支持多张图片上传，效果如下前端页面代码：  <div class="layui-form-item"> <div class="layui-input-block"> <di...

使用layui的图片上传组件问题

晴天小风的博客

10-21

636

使用layui的图片上传组件，在图片上传和表单提交一起的时候，会因为2个ajax请求的异步导致数据和图片无法绑定，即不是同时进行请求，一般是先会上传图片，再提交表单。解决思路： 1.打开layui的自动图片上传，先上传在提交表单，缺陷是会可能造成图片多余（选择了再删除） 2.先提交表单，成功后返回对应数据，再上传图片返回路径，上传绑定的数据和图片，请求会比较多 3.先提交表单，成功后返回...

使用layui的上传图片功能

m0_66722601的博客

10-31

1369

使用layui的上传图片功能

layui中表单上传图片的方法

qq_43707906的博客

08-02

4978

项目场景： layui通过表单上传图片：项目场景：项目练习时候遇到一个问题，在使用layui框架时在表单提交图片时遇到的问题。思路：因为表单的数据要提交到数据库中就需要考虑图片在数据库中的方式。有两种存取方式：把图片直接以二进制形式存储在数据库中图片存储在磁盘上，数据库字段中保存的是图片的路径。具体实现思路：选用了第二种方式： 1.给layui中自带的上传图片模块单独写一个接口， 2.在图片时就访问这个接口，将图片以二进制的形式传到接口中处理。 3.在接口中将处理好的文件放到指定的

layui框架学习（42：文件上传模块-上）

gc_2299的博客

08-29

1929

学习并记录layui框架中内置模块的文件上传模块的参数设置方式。

通过layui实现图片的上传和预览

qq_54384868的博客

04-19

3604

在HTML部分和JavaScript部分中，我们都使用了一些Layui组件来帮助我们实现这个功能。我们使用了layui-form和layui-input类来创建表单项，使用layui-icon和layui-btn类来创建图标按钮，并使用Layui的弹窗组件来展示预览图片。

layui上传图片列表展示_layui图片上传

weixin_42357663的博客

12-31

983

let photoFiles = []; let ossToken = null; let maxCount = 5; let uploadcom = upload.render({ elem: '#importPhoto', multiple: true, auto: false, exts: 'png|jpeg|jpg|gif', size: 1024 * 10, // 限制单张10M number: maxCount, // 动态绑定最大数量 choose: function(obj) { // 清空输入框值（避免重复提交） uploadcom.config.elem.next()[0].value = ''; // 获取用户选择的文件并校验数量 let files = obj.pushFile(); if (Object.keys(files).length > maxCount) { layer.msg(`最多上传 ${maxCount} 个文件！`); // 手动截断超出部分 let validFiles = {}; let count = 0; for (let key in files) { if (count >= maxCount) break; validFiles[key] = files[key]; count++; } photoFiles = validFiles; // 重新预览有效文件 // $('#imgItemInfo').empty(); // 清空旧预览 $('#imgItemInfo') .find('>').not('#importPhoto') // 找到所有直接子元素，排除 #importPhoto .remove(); // 删除其他元素（即预览内容） obj.preview(function(index, file, result) { if (validFiles[index]) { // 仅渲染有效文件 $('#imgItemInfo').append(` <div id="imgDiv-${index}" class="layui-upload-drag-self layui-upload-img-self"> <img src="${result}" alt="${file.name}" width="80px" height="80px"> <a id="${index}" class="handle"><i class="layui-icon icon-myself"> ဆ </i></a> </div> `); // 删除按钮事件 $(`#${index}`).click(function() { $("#imgDiv-" + index).remove(); delete photoFiles[index]; }); // 图片放大事件 $(`#imgDiv-${index} img`).click(function() { $('#modalImage').attr('src', this.src); $('#imageModal').show(); }); } }); } else { // 未超量时的正常预览逻辑 photoFiles = files; obj.preview(function(index, file, result) { $('#imgItemInfo').append(` <div id="imgDiv-${index}" class="layui-upload-drag-self layui-upload-img-self"> <img src="${result}" alt="${file.name}" width="80px" height="80px"> <a id="${index}" class="handle"><i class="layui-icon icon-myself"> ဆ </i></a> </div> `); $(`#${index}`).click(function() { $("#imgDiv-" + index).remove(); delete photoFiles[index]; }); $(`#imgDiv-${index} img`).click(function() { $('#modalImage').attr('src', this.src); $('#imageModal').show(); }); }); } }, // 关闭模态框（修复语法错误） done: function() { $('.close-btn').click(function() { $('#imageModal').hide(); }); } });这个方法有个bug ,当第一次上传文件超过数量限制后，不关闭当前弹窗，删除了几张图片，再次点击上传图片，就毫无反应了