最近在写项目时遇到了一个功能，就是用layui通过ajax接口上传图片并预览，当然我是想实现多个按钮上传多个图片的功能，最后限于专业技能没有实现，但是实现了单个图片上传，可以用于上传图像等功能，直接上代码吧。当然layui又下线了，后续使用这个模板更加费劲了。

前端代码jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="layui-form-item">
    <label class="layui-form-label">
        <span class='x-red'>*</span>主图
    </label>
    <div class="layui-upload">

        <button class="layui-btn " id="preview_img" type="button" name="file">
            上传图片
        </button>
        <div class="layui-upload-list" style="margin-left: 108px;">
            <img class="layui-upload-img" id="demo" width="92px" height="92px" src="${obj.url1}">
            <p id="demoText"></p>
        </div>
        <div class="layui-collapse" lay-accordion="" style="width: 399.5px; margin-left: 108px;">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">展开图片</h2>
                <div class="layui-colla-content" id="colla_img" style="">
                </div>
            </div>
        </div>
    </div>

javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
layui.use(['upload', 'element', 'layer','form'], function(){
    var $ = layui.jquery
    ,upload = layui.upload
    ,element = layui.element
    ,layer = layui.layer
    ,form = layui.form;
    //下面是单按钮单图片上传
    var myfile;
    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
        elem: "#preview_img"
        ,url: '${ctx}/item/exUpdate' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        ,auto: false
        //,bindAction: '#upload_img'  //指向上一个按钮触发上传
        //,accept:'file'
        ,accept: 'images',
        choose: function (obj) {
            obj.preview(function (index, file, result) {
                $('#demo').attr('src',result);
                myfile = file;
                // $('#fileName').val(file.name); //展示文件名
                $('#colla_img').find('img').remove();
                $('#colla_img').append('<a href="#" οnclick="openImg();"><img id="showImg" src="' + result + '" width="370px"></a>');
            })
        },
        before: function(obj) {
            // 预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                $('#demo').attr('src', result); // 图片链接（base64）
            });
        },

        done: function (res) {
            // $('#credential_hide').val(res.msg); //隐藏输入框赋值
            //$('#submitForm').click(); //上传成功后单击隐藏的提交按钮
            // 如果上传失败
            if(res.code > 0) {
                return layer.msg('上传失败');
            }
            //上传成功
        },

        error: function (index, upload) {
            //layer.msg('上传失败！' + index, {icon: 5});
            // 演示失败状态，并实现重传
            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();
            });
        }
    });
    
    //监听提交
    form.on('submit(*)', function(data){

        //var data1 = data.field;
        var myForms = $('#myupdate')[0];
        var formdatas = new FormData(myForms);
        formdatas.append("item",JSON.stringify(data.field));
        formdatas.append("file",myfile); /*单张图片上传相关代码*/
        //formdatas.append("file[]",myfile);
        console.log(formdatas);   

        $.ajax({
            type:"post",
            url:"",//上传接口
            data:formdatas,//单张图片上传改为formdatas
            contentType: false,//查文档ajax
            processData: false,//查文档ajax  
            dataType:"json",
            success:function (data) {
                if (data.code==20000){
                    console.log("update_yh修改"+data.message);
                    layer.alert("修改成功", {
                        icon: 6
                    }, function() {
                        //关闭当前frame
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                }
            }
        });
        return false;
    });
});

后台接收方法

1
2
3
4
5
6
7
8
9
10
@RequestMapping("/exUpdate")
@ResponseBody
public R exUpdate(String item, @RequestParam("file") CommonsMultipartFile[] files, HttpServletRequest request) throws IOException {
    System.out.println("进入exupdate");
    JSONObject json = JSONObject.parseObject(item);
    Item item1 = JSON.toJavaObject(json,Item.class);
    itemCommon(item, files, request);//这个方法是文件上传逻辑
    itemService.updateById(item);
    return R.ok();
}

记录一下，算是点亮一个小技巧，虽说是一个简单的功能，但是也在上面用了很多时间。后续请教同学做想实现而没能实现的功能吧。