ssm+layui实现图片的上传与读取

图片上传确实是一个项目比较核心的技术，我的项目并没有用到传统的富文本上传，而是将图片先热部署到tomcat，在上存储到数据库，读取的时候同样使用此方法。

图片上传

1.设置存放图片的img，以及事件按钮

    <div class="layui-form-item"><label class="layui-form-label"><span class="x-red">*</span>食品图片</label><div class="layui-upload"><div class="layui-upload-list"><img class="layui-upload-img" id="image"></div><label class="layui-form-label"><span class="x-red"></span></label><button type="button" class="layui-btn" id="foodimage1">上传图片</button ></div></div>

2.上传与预读

var foodimage='';//全局变量，负责获取相应字段的值layui.use('upload', function() {var $ = layui.jquery, upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#foodimage1', url: '/pushingdata/foodimageup' //改成您自己的上传接口,before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#image').attr('src', result); });}, done: function (res) {foodimage=res.data.src;//这个就是个消息提示方法可写 可不写layer.msg('上传成功', {icon: 6});//上传成功}, error: function () {//演示失败状态，并实现重传layer.msg("上传失败，请重试！", {icon: 5});}});});

3.后台接口

   //上传图片@RequestMapping("foodimageup")@ResponseBodypublic Map<String, Object> up(MultipartFile file) {Map<String, Object> map = new HashMap<String, Object>();Map<String, String> data = new HashMap<String, String>();//设置图片保存的本地路径  前缀路径//之前设置Tomcat的imgages路径String filePath = "D:\\test\\Business_card_system\\web\\static\\image\\";// 获取原始图片的扩展名String originalFilename = file.getOriginalFilename();// 使用uuid生成文件新的名字String newFileName = UUID.randomUUID() + originalFilename;//.replace("-", "");去掉UUID的 - 这步可以不写，我不喜欢uuid的 - 符号，所以就去掉了newFileName = newFileName.replace("-", "");// 封装上传文件位置的全路径就是前缀加上文件名称File targetFile = new File(filePath, newFileName);try {//保存图片，这里会抛一个异常file.transferTo(targetFile);} catch (IOException e) {e.printStackTrace();}map.put("code", 0);map.put("msg", "");map.put("data", data);data.put("src", "http://localhost:8080/image/" + newFileName);return map;}

图片读取

1.图片读取相对简单，后台返回的是一个数组，前台直接读取即可

<img class="image" src="" id="image1">

$('#image1').attr('src', data[0].buyimage);

这里有需要注意的只有数组获取值得形式

好了，图片的操作基本完成，待项目完成会把完整项目分享出来。

ssm+layui实现图片的上传与读取相关推荐

使用SSM框架实现图片的上传
SSM实现图片上传功能效果在前端页面点击上传图片功能按钮,即弹出文件管理器,选择图片并上传: 思路在前端页面添加 input 标签,type选择file. 在后端controller编写方法. ...
layui实现文件压缩上传_基于SSM框架、Layui的多文件上传、包括图片，压缩包，音频等文件（与数据库挂钩） - 爱秧博客...
写在前面:当初为了实现一个多文件上传可是费了一番功夫,经过我日日夜夜的百度咨询,写了好几种方法,最终还是没能解决问题.我可以很负责任的告诉你,你去百度上不管你形容有多好,只要是涉及多文件,就会查到Mu ...
php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在最后将核心代码 ...
SSM框架：springmvc实现图片的上传与图片上传路径的设置
说明:这个图片类文件上传的步骤是我经过验证的,在SSM框架下完成,搭建框架的部分不在这里说明. 第一步:添加两个项目需要的依赖.(pom.xml) <dependency><grou ...
layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
layUi upload单文件上传，重复上传的问题
今天遇到个问题,layUi upload单文件上传,选择两个不同文件时,第二次点击上传按钮还没选择上传,会把第一次上传的文件再上传一次 .在网上查到了答案,记录一下 //单个上传 upload.ren ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
lyaui清除图片文件上传成功后清除文件队列，防止重复提交
最近使用layui发现,在页面上传了图片可以用以下方式清除文件队列,在此做下笔记 let uploadInst = upload.render({elem: '#test1' //绑定元素,url: ...

ssm+layui实现图片的上传与读取

ssm+layui实现图片的上传与读取

图片上传

图片读取

ssm+layui实现图片的上传与读取相关推荐

最新文章

热门文章