layui表格实现图片上传功能

前端的代码Layui官网上也有,大家可以参考一下(主要是后端比较难实现,话不多说 小二上代码)

div

<div class="layui-form-item" style="padding-right: 50px;">
        <div class="layui-form-item">
            <label class="layui-form-label">作者头像</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload1">上传图片</button>
                <input type="hidden" id="img_url" name="img" value=""/>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" width="200px" height="120px" id="demo1"/>
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

js里的

<script src="../../js/jquery-3.4.1.min.js"></script>//换成自己的js路径
    <script src="../../layui/layui.js"></script>//换成自己的Layui路径
<script>
   // 文件上传
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload1'
            ,url: '/EmployeeController/uploadFile' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){

                //如果上传失败
                if(res.code > 0){
                    layer.msg('上传失败');
                }
                //上传成功
                layer.msg('上传成功');
                //将图片的名字放在表单中，添加的时候得放在数据库里面
                $(function(){
                  var adminImg=$("#fileName").val(res.msg);
                    //alert('赋值成功');
                    alert("adminImg:"+adminImg);
                })
            }
            ,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();
                });
            }
        });
    });
    </script>

真正的主菜来了

Controller里的

 //图片上传
    @ResponseBody
    @RequestMapping("/uploadFile")
    public JSON uploadFile(MultipartFile file, HttpServletRequest request) {
        JSONObject json = new JSONObject();
        //路径
        //System.getProperty("file.separator")文件执行符:\\
        String filePath = "E:"+System.getProperty("file.separator") + "idea/dika/src/main/webapp/addressimg/";//上传到这个文件夹
        File file1 = new File(filePath);
        //如果没有的话创建一个
        if (!file1.exists()) {
            file1.mkdirs();
        }

        //路径+文件名
        //文件名：file.getOriginalFilename()
        String finalFilePath = filePath + file.getOriginalFilename().trim();
        File desFile = new File(finalFilePath);
        if (desFile.exists()) {
            desFile.delete();
        }
        try {
            file.transferTo(desFile);
            json.put("code", 0);
            //将文件名放在msg中，前台提交表单时需要用到
            json.put("msg", file.getOriginalFilename().trim());

            JSONObject json2 = new JSONObject();
            json2.put("src", finalFilePath);
            json2.put("title", "");
            json.put("Data", json2);

        } catch (Exception e) {
            System.out.println(e.getMessage());
            json.put("code", 1);
        }
        System.out.println(json);
        return json;
    }

千万不要忘了在maven中添加JSON依赖

<!--json依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>

相关资源

客服美女嫌别人看不见自已的神仙颜值???好家伙(layui点击表格图片放大功能)