文件上传(图片)与页面图片轮播展示

其他 2019-05-05 10:01:02 阅读次数: 0

1、前端UI框架用的是layui，这玩意很强大，有兴趣的小伙伴可以了解一下，https://www.layui.com/demo/upload.html

注意：如果你要用到layui框架，必须引入相对应的js和css，我在百度网盘下已经为大家准备好了：

https://pan.baidu.com/s/1kL6ijrqC99M8MFOF7qMvMg

提取码: xj9e

 

好了，废话不多说上菜：

一、图片上传HTML、Js、后台接口

HTML：

<html>
<head>
    <title>列表</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="/static/opperations/js/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/opperations/js/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规使用：普通图片上传</legend>
</fieldset>
<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>
</body>
</html>

Js：

layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/fileUpload/uplodImgs'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            } , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                    isDefault = 1;
                    uploadInst.config.elem.next()[0].value = ''
                });
            }
            ,done: function(res){
                //如果上传成功
                if(res.code > 0){
                    return layer.msg('上传成功');
                }
                //上传失败
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

后台接口：

这个接口最后是做成了使用微信小程序拍照上传的接口，所以你可以不看之前的HTML和js。

引入的包，自己找找
import com.alibaba.fastjson.JSONObject;
import com.purete.api.entity.sys.SysAttachmentEntity;
import com.purete.api.service.api.opers.member.DeviceUserApplicationService;
import com.purete.api.service.api.sys.SysAttachmentService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;



接口代码：
@RequestMapping(value = "/uplodImgs", method = { RequestMethod.POST })
    @ResponseBody
    public JSONObject uplodImgs(@RequestParam(value = "file", required = false) MultipartFile file, String uuid,HttpServletRequest request, HttpServletResponse response)
    {
        JSONObject result = new JSONObject();
        //附件表
        SysAttachmentEntity sysAttachmentEntity = new SysAttachmentEntity();
        BufferedOutputStream out = null;
        InputStream fileInput = null;
        String originalName = null;
        String path = null;
        String prefix = null;

        if (file!=null && !file.isEmpty()) {
            String filePath = file_path +"useraudit"+"/"+ uuid + File.separator;

            originalName = file.getOriginalFilename();
            prefix = originalName.substring(originalName.lastIndexOf(".") + 1);
            String newFileName = System.currentTimeMillis() + "." + prefix;
            File tempFile = new File(filePath);
            if (!tempFile.exists())
            {
                tempFile.mkdirs();
            }
            path = filePath + newFileName;
            path = path.replace("\\", "/");

            try
            {
                out = new BufferedOutputStream(new FileOutputStream(new File(path)));
                out.write(file.getBytes());
                out.flush();
                out.close();

                sysAttachmentEntity.setFileName(newFileName);
                sysAttachmentEntity.setContentType(prefix);
                sysAttachmentEntity.setFilePath(path);
                int i=  this.sysAttachmentService.insertSelective(sysAttachmentEntity);

            }
            catch (IOException e)
            {
                e.printStackTrace();
                result.put("flag", false);
                result.put("msg", "文件上传失败");
                return result;
            }finally
            {
                try
                {
                    if (out != null)
                    {
                        out.close();
                    }
                    if (fileInput != null)
                    {
                        fileInput.close();
                    }
                }
                catch (IOException e)
                {
                    e.printStackTrace();
                    result.put("flag", false);
                    result.put("msg", "文件上传失败");
                }
            }

            result.put("data", sysAttachmentEntity.getId());
            result.put("msg", "文件上传成功");
            result.put("flag", true);
            return result;
        }else{
            result.put("msg", "文件为空");
            result.put("flag", false);
            return result;


        }
}

备注：把上传后的接口数据返回给微信小程序。后台还用到了mybatis框架，在SysAttachmentMapper.xml的新增方法中加入一

一  useGeneratedKeys="true" keyColumn="id" keyProperty="id"

举个例子：

<insert id="insertSelective" useGeneratedKeys="true" keyColumn="id" keyProperty="id" parameterType="com.purete.api.entity.sys.SysAttachmentEntity" >

方可取得sysAttachmentEntity这个对象新增后回显的id，微信小程序会把每一次拍照的数据id存放在一个数组里，当小程序把整张表单数据提交时，调用主表的新增接口，将主表信息和附件表的数组id保存到主表中。

@RequestMapping(value = "/userApln/save", method = { RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public JSONObject uplodImg(HttpServletRequest request,HttpServletResponse response,DeviceUserApplicationEntity DeviceUserApplication){
          return deviceUserApplicationService.insert(DeviceUserApplication);
}

好了，图片上传就到这了。

 

 

 

二、图片展示HTML、Js、后台接口

HTML：这里用到了layui的图片轮播展示

<html>
<head>
    <title>列表</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="/static/opperations/js/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/opperations/js/layui/css/layui.css">
    <style>
        #imgresult img{
            width: auto;
            height:100%;
            display: block;
            margin: 0 auto;
            object-fit: contain;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <input type="hidden" id="andappeId">
    <div v-show="showList">
            <div class="col-sm-6">
                <div class="form-group">
                    <div id="anappealName" class="col-sm-2 control-label">故障图片</div>
                    <div class="col-sm-10">
                        <div class="layui-carousel" id="carouselStyle" lay-filter="LeftRightChange">
                            <div id="imgresult" carousel-item="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<script src=".....js"></script>
</body>
</html>

Js:获取主表对象这条数据，遍历这条数据的附件表id，将id分割，再用分割id去后端调用接口，动态创建图片展示。

if(r.deviceUserApplication.attachment!="" && r.deviceUserApplication.attachment!= null ){
                     var arr = r.deviceUserApplication.attachment.split(",");
                    for(var i=0;i<arr.length;i++){
                       $("#imgresult").append("<div class=''><img id="+i+" src='/fileUpload/displayImg/"+arr[i]+"'></div>");

                        layui.use(['carousel', 'form'], function(){
                            var carousel = layui.carousel
                                ,form = layui.form;
                            //图片轮播
                            carousel.render({
                                elem: '#carouselStyle'
                                ,width: '500px'
                                ,height: '350px'
                                ,interval: 5000
                                ,index:1
                            });
                        });
                    }
                 }else{
                     $("#anappealName").remove();
                 }

 

接口代码：

@RequestMapping(value = "/displayImg/{id}", method = { RequestMethod.POST, RequestMethod.GET })
    public String displayImg(@PathVariable Long id, HttpServletRequest request, HttpServletResponse response) throws IOException
    {
        SysAttachmentEntity sysAttachmentEntity = this.sysAttachmentService.selectByPrimaryKey(id);
        if (sysAttachmentEntity == null)
        {
            return null;
        }
        File f = new File(sysAttachmentEntity.getFilePath());
        //判断该文件是否存在
        if (!f.exists())
        {

            return null;
        }
        String filepath = sysAttachmentEntity.getFilePath();

        //截取时间戳
        String fileName = filepath.substring(filepath.lastIndexOf("/")+1);

        //获取图片存放路径
        File file = new File(filepath);
        if (file.exists())
        {

            // 设置强制下载不打开
            response.setContentType("application/force-download");
            // 设置文件名  与显示的文件名相匹配  成功就显示
            response.addHeader("Content-Disposition", "attachment;fileName=" + fileName);
            byte[] buffer = new byte[1024];
            FileInputStream fis = null;
            BufferedInputStream bis = null;
            try
            {
                fis = new FileInputStream(file);
                bis = new BufferedInputStream(fis);
                OutputStream os = response.getOutputStream();
                int i = bis.read(buffer);
                while (i != -1)
                {
                    os.write(buffer, 0, i);
                    i = bis.read(buffer);
                }
                os.close();
            }
            catch (Exception e)
            {
                e.printStackTrace();
            }
            finally
            {
                if (bis != null)
                {
                    try
                    {
                        bis.close();
                    }
                    catch (IOException e)
                    {
                        e.printStackTrace();
                    }
                }
                if (fis != null)
                {
                    try
                    {
                        fis.close();
                    }
                    catch (IOException e)
                    {
                        e.printStackTrace();
                    }
                }
            }
        }
        return null;
}

好了，这就是图片的上传和展示，有需要的小伙伴可以借鉴。希望点评，给出更好的建议。

 

猜你喜欢

转载自blog.csdn.net/qq_35797735/article/details/85007190
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022