1、layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发(http://www.layui.com/doc/)
2、前台js代码:
if($('.upload-img')[0]){ layui.use('upload', function(upload){ var avatarAdd = $('.avatar-add'); layui.upload({ elem: '.upload-img input' ,method: 'post' ,url: '/user/upload.do' ,before: function(){ avatarAdd.find('.loading').show(); } ,success: function(res){ if(res.result){ $.post('/user/set.do', { avatar: res.url }, function(res){ location.reload(); }); } else { layer.msg(res.msg, {icon: 5}); } avatarAdd.find('.loading').hide(); } ,error: function(){ avatarAdd.find('.loading').hide(); } }); }); }
3、后台接收接口:
/** * 头像上传接口 * @param file 上传图片 * @param request * @return */ @RequestMapping("/user/upload.do") @ResponseBody public Object upload(MultipartFile file, HttpServletRequest request) { try { String path = request.getSession().getServletContext().getRealPath("/"); path = path + "/" +"data" + "/" + "upload" + "/" + "photo" + "/"; LOGGER.info("path----------:{}", path); String image = UploadUtil.uploadImage(file, path) ; LOGGER.info("image-----------:{}", image); User user = (User)request.getSession().getAttribute("user") ; if(user != null) { user.setPhoto(image); userService.update(user); return renderResult(true, "上传成功") ; }else { return renderResult(false, "用户未登录,上传失败") ; } } catch (Exception e) { e.printStackTrace(); } return renderResult(false, "上传失败") ; }
附上上传照片工具类:
public static String uploadImage(MultipartFile file, String path) throws IOException { String name = file.getOriginalFilename() ; String suffixName = name.substring(name.lastIndexOf(".")) ; Date date = new Date() ; String hash = DateUtil.toStr(date.getTime());//给照片自定义一个名字,用时间做名称,不会重复 String fileName = hash + suffixName ; File tempFile = new File(path, fileName) ; if(!tempFile.getParentFile().exists()) { tempFile.getParentFile().mkdirs() ; } tempFile.createNewFile() ; file.transferTo(tempFile); return tempFile.getName() ; }
相关推荐
1. layui上传组件基础: layui的上传组件(layui.upload)是一个基于HTML5 File API的模块,支持单图和多图上传。它提供了简单的API接口,如elem、url、multiple等参数,用于配置上传按钮的选择器、上传的URL以及...
在LayUI图片上传功能中,如果前端和后端不在同一域或端口下,就会触发这个限制,导致请求接口失败。本文将介绍如何解决由跨域问题引起的请求接口错误。 首先,我们需要理解跨域的基本概念。跨域(Cross-Origin)是...
使用Layui上传文件时,我们可以得到一个包含上传信息的对象,通常这个对象会被命名为Map。这个对象包含了服务器处理文件上传后返回的相关信息,其中最重要的一点就是文件在服务器上的存储地址。 在Layui中实现文件...
富文本-图片上传 html: <div class=layui-form-item> <div class=layui-input-block> <!--<textarea id=L_content name=contents required lay-verify=required placeholder=详细描述 class=layui-textarea...
本文将深入探讨如何使用H5实现多图片预览、上传功能,并支持点击和拖拽操作,同时保持界面的美观和接口的简洁性。在图片上传控件的设计中,用户体验和功能实现是两个关键要素。 首先,我们要了解HTML5引入的新特性...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久...
《layui与JDBC结合实现JavaWeb的增删改查及照片上传、分页功能》 在Web开发领域,layui是一款非常流行的前端UI框架,它以其简洁的代码、丰富的组件和良好的用户体验深受开发者喜爱。本项目“loginwork02.rar”正是...
在移动应用开发中,"手机拍照上传"是一个常见的功能,让用户能够通过手机摄像头捕捉图片并将其上传到服务器。本文将详细解析实现这一功能的关键技术点,包括前端图像处理和后端存储优化。 首先,前端部分涉及到的...
项目用到了JDBC,JavaBean,接口实现类,Servlet,js,css,Properties,上传照片,存Blob格式到Oracle数据库, 第8版基本实现,后面版本又用到了LayUI框架。从开始到结束迭代了10个版本,层层递进,有需要的新手...
- 在社交媒体上,它可以自动标记用户上传照片中的人物。 - 在商业领域,可用于顾客分析,比如零售店的顾客流量统计。 总结来说,这个"人脸识别Java程序"涉及了计算机视觉、机器学习、图像处理等多个领域的知识,...
5. 安全与权限控制:确保在访问摄像头时获得用户的明确许可,并且在服务器端对上传的图片进行验证,防止恶意文件上传。同时,需要考虑隐私保护,避免未经用户同意就保存或分享其照片。 6. 浏览器兼容性:在设计和...
注意,实际的文件选择和上传逻辑需要根据你的项目需求和后端接口来编写。 总的来说,实现 JavaScript 更换头像功能主要涉及以下几个步骤: 1. 引入必要的 CSS 和 JS 文件。 2. 创建 HTML 结构,包括裁剪区域和预览...
在网页开发中,图像处理是一项常见的需求,尤其是在用户上传照片或需要自定义裁剪图片时。Cropper是一款强大的JavaScript图像裁剪库,它提供了丰富的功能和易用的API,使得在前端实现图片裁剪变得更加简单。本文将...