2021-3-31 工作记录--LayUI-页面内容提交(Ajax)+上传图片（多图上传）

小呀小萝卜儿

已于 2022-03-16 11:33:48 修改

阅读量467

点赞数 3

分类专栏：工作-LayUI 文章标签： ajax layui 前端

于 2021-03-31 15:12:05 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/115350777

版权

工作-LayUI 专栏收录该内容

47 篇文章 4 订阅

订阅专栏

1、页面内容提交（将整个页面的内容获取过来，提交到后台）

Html代码：
在这里插入图片描述

页面相应结果：
在这里插入图片描述
JS代码：Ajax提交保存信息

2、上传图片（多图上传）

Html代码：
在这里插入图片描述
JS代码：

 // 图片相关变量
    let max_number = 5; // 最多上传图片数
    let chosePicNum = 0; // 选择的图片的数
    let resPic = {}; // 已选择的图片 key是编号 value是图片文件流
    let indexload = ''; //layer 遮罩层
    layui.use('upload', function() {
        let $ = layui.jquery, upload = layui.upload;

        // 多图上传
        upload.render({
            elem: '#picupload',
            url: "{:url('Common/upload')}",
            multiple: true,
            accept: 'images',
            number: max_number,
            auto:false,
            bindAction: '#btnimage',
            acceptMime: 'image/*',
            choose:function(obj) { // 选择图片的一些限制条件
                var flag = true;
                obj.preview(function(index, file, result){
                    // 预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    console.log(chosePicNum, max_number)
                    if(chosePicNum >= max_number){
                        flag = false;
                        delete resPic[index];
                        layer.msg('超过文件限制');
                        return false;
                    } else {
                        resPic = obj.pushFile();
                        $('#preview').append('<img  src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img xc"  style="width: 10%">' +
                            '<span class="sxspan"  οnclick=delPreviewPic(this,"'+ index +'") key="'+chosePicNum+'">' +
                            '<img src="/static/admin/image/xcdel.png" style="width: 100%" alt=""></span>')
                        chosePicNum ++
                    }
                });
            },
            before: function(obj) {

                if(JSON.stringify(resPic)!="{}"){
                    indexload = layer.load(1, {time: 10*1000,offset: 'auto'});
                }else{
                    layer.msg('没有可上传的本地文件')
                }
            },
            done: function(res,index) {
                delete resPic[index];
                if(res.code == 200){
                    if(JSON.stringify(resPic)=="{}"){
                        layer.msg('上传完成');
                        layer.close(indexload);
                    }
                    var allimage =  $('input[name=img]').val();

                    if(allimage == ''){
                        $('input[name=img]').val(res.imgpath)

                    }else{
                        $('input[name=img]').val(allimage+','+res.imgpath)

                    }
                }
            }
        })
    });

    // 删除预览图片
    function delPreviewPic(obj, gan) {
        let indexss=  $('#preview span').index(obj); // 获取索引值
        $(obj).prev().remove() // 删除图片
        $(obj).remove() // 删除叉图标
        let allimage =  $('input[name=img]').val();
        if (allimage) {
            let arr =  allimage.split(',');
            arr.splice(indexss, 1) // 删除一张对应索引值的图片地址
            $('input[name=img]').val(arr.join(','));
        }
        delete resPic[gan];
        chosePicNum--
    }