两种form表单上传多个文件以及瀑布流翻页获取数据

收获总结

负责发布和瀑布流渲染的交互 先说第一个 后端第一次给的接口是图片顺序对应图片 所以上传一次图片就调用一次接口
html内容如下

<div class="goodstips">
                <div id="moreadd">
                    <div class="sendgoopage" id="1">             <!-- 将id对应图片顺序 -->
                        <form action="" method="post" class="sendphotolistbox" name="myflie">
                            <input class="coverImagelistUrl coverlistImage"  type="file"  value="" accept="image/gif,image/jpeg,image/jpg,image/png,image/webp" style="opacity: 0;z-index: 20;" name="imgliestFile" id="inputhidden1" onchange="adddetailPhoto(this)">
        	  <!-- 利用id得到input的id值1-->
                            <div class="addphotolist">
                                <i class='iconfont' style="color:white;font-size: 20px;">
                                    &#xe600;
                                </i>
                            </div>
                            <div class="tipword">
                                <span style="color: white;">
                                    添加商品详情图片
                                </span>
                            </div>
                        </form>
                    </div>
                    
                </div>
                <div class="goodstipsbt">
                    <button  class="delectAdd" id="delectAdd">确认删除</button>
                    <button id="goodstipsbtn">添加更多</button>
                </div>
                <div class="suresend">
                    <button id="suresend">确认发布</button>
                    <button id="delectsend">取消发布</button>
                </div>
            </div>

#goodstips {
  padding: 5px;
  text-align: center;
  background-color: #a5bed6;
  color: white;
  border-radius: 5px;
}

.goodsPoistion {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  margin-left: 30px;
}

#goodstipsbtn {
  background-color: white;
  border: 1px solid #a5bed6;
  border-radius: 5px;
  padding: 6px;
  margin-left: 76px;
}

#suresend {
  background-color: #a5bed6;
  color: white;
  border-radius: 5px;
  padding: 6px;
  margin-left: 30px;
  zoom: 1.7;
}

#delectsend {
  background-color: #a5bed6;
  color: white;
  border-radius: 5px;
  padding: 6px;
  margin-left: 30px;
  zoom: 1.7;
  margin-left: 43px;
}

.goodsoldPrice {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  margin-left: 30px;
}

.goodsnewPrice {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  margin-left: 30px;
}

#addsendMainimg {
  padding: 5px;
  text-align: center;
  background-color: #a5bed6;
  color: white;
  border-radius: 5px;
  margin-top: 20px;
}

#sendMainImg {
  background-color: #a5bed6;
  color: white;
  border-radius: 5px;
  padding: 6px;
  margin-top: 30px;
}

.sureAdd {
  background-color: #a5bed6;
  color: white;
  border-radius: 5px;
  padding: 6px;
  margin-left: 30px;
}

.suresend {
  width: 389px;
  margin: 45px auto;
}

.delectAdd {
  background-color: white;
  border: 1px solid #a5bed6;
  border-radius: 5px;
  padding: 7px;
  margin-left: 75px;
}

.goodstipsbtn {
  width: 113px;
  margin: 31px auto;
}

.imgFiles {
  position: absolute;
  top: -20px;
}

.delectMainphoto {
  width: 326px;
  margin: 29px auto;
}

js代码如下

let imgFiles = document.getElementsByClassName("imgFiles");
let goodstipsbtn = document.getElementById("goodstipsbtn");
let coverImagelistUrl = document.getElementsByClassName("coverImagelistUrl");
let sendphotolistbox = document.getElementsByClassName("sendphotolistbox")
let sendgoopage = document.getElementsByClassName('sendgoopage');
let moreadd = document.getElementById("moreadd")
var newi = 1;
// 用变量定义id
var i = 1;
goodstipsbtn.onclick = function () {
    console.log("判断", imgFiles.length, i);
    if (imgFiles.length < i) {
        alert("请选择图片")
    }
    else {
        newi = newi + i//2
        let newid = `inputhidden` + newi;
        console.log(newi);
        let newbox = document.createElement('div')
        newbox.className = 'sendgoopage';
        newbox.id = newi;
        // 创建id为1 2 3 4 5的盒子
        i = i + 1;
        // 将newid作为id的值
        // 绑定onchange函数
        let str = `<form action="" method="post" class="sendphotolistbox" name="myflie">
                <input class="coverImagelistUrl coverlistImage"  type="file" 
                 value="" accept="image/gif,image/jpeg,image/jpg,image/png,image/webp"
                  style="opacity: 0;z-index: 20;" name="imgliestFile" id='${newid}' οnchange="adddetailPhoto(this)">
                <div class="addphotolist">
                    <i class='iconfont' style="color:white;font-size: 20px;">
                        &#xe600;
                    </i>
                </div>
                <div class="tipword">
                    <span style="color: white;">
                        添加商品详情图片
                    </span>
                </div>
            </form>`
        newbox.innerHTML = str;
        moreadd.appendChild(newbox);
    }
}
// 第四个接口 上传多张图片****
function adddetailPhoto(event) {
    var number = event.parentNode.parentNode.id;
    // 获取到id为1 2 3 4 5 的盒子
    var dietails = new FormData();
    let trythings = `inputhidden${number}`
    // 创建表单
    // 获取files对象
    var dietailsPhoto = document.getElementById(trythings).files[0];
    console.log(dietailsPhoto);
    dietails.append('file', dietailsPhoto);
    // 回显图片
    const img = document.createElement("img");
    img.src = URL.createObjectURL(dietailsPhoto);
    img.style.width = '248px';
    img.style.height = '248px';
    img.className = 'imgFiles';
    number.innerHTML = img;
    console.log(img);
    console.log(document.getElementById(number));
    document.getElementById(number).appendChild(img);
    // 提交表单
    const adddetailPhoto = `http://101.43.229.81:8080/Diet/CommodityController/uploadCommodityIntroduceImage?commodityId=${goodsId}&number=${number}`;
    $.ajax({
        type: "POST",
        url: adddetailPhoto,
        contentType: false,
        processData: false,
        data: dietails,
        //表单传进去
        cache: false,
        success: function (result) {
            console.log(result)

        },

        error: function (err) {
            console.log(err)
        }
    })
}

第二种提交表单 是个集合的形式 采用input框为multiple的值进行输入 一次性上传多张

// 回显图片
// 获取选择图片的个数
let domImg = document.getElementById("image");
// 往里面新添加内容
let imgShows = document.getElementById("imgShows");
var filesNum;
function changeshowIMg() {
    filesNum = domImg.files;
    var length = filesNum.length;
    console.log("选择了" + length);
    console.log(filesNum);
    // 往里面新添加内容
    // 回显 遍历数据
    $.each(filesNum, function (key, value) {
        // jq遍历  key索引
        let img = document.createElement('img');
        var newfr = new FileReader();
        newfr.onload = function () {
            img.src = this.result;
            img.style.width = '200px';
            img.style.height = '180px';
            img.style.marginLeft = '0px';
            img.style.marginTop = '0px';
            img.id = key + 'img';
            document.getElementById('imgShows').appendChild(img);
            img.className = 'creatIMglist'
        }
        // 读取文件
        newfr.readAsDataURL(value);
    })
}
var newNoteId;
// 将files集合放到form表单里
// 将f提交
function sendPhotolist() {
    var f = new FormData()
    for (let item of domImg.files) {
        f.append('file', item)
    }

    const sendPhotolistUrl = `http://101.43.229.81:8080/Diet/notes/uploadNote?authorId=1&introduce=${textConten.value}&title=${notetitle.value}`
    $.ajax({
        type: "POST",
        url: sendPhotolistUrl,
        contentType: false,
        processData: false,
        data: f,
        async:false,
        // header: {
        //     'Conten-Type': 'multipart/form-data',
        // },
        success: function (result) {
            console.log(result)
            newNoteId=result.data.id;
        },
        error: function (err) {
            console.log('失败', err)
        }
    })
}

html代码如下

<ul class="noteimg">
        <li class="upload">
            <div class='upload-img'>
                <span class='upload-icon'></span>
                <p>上传作品图
                    按住crtl可选中多张
                </p>
                <form action="" method="post" enctype="multipart/form-data">
                <input type='file' id='image' multiple onchange="changeshowIMg()" accept="image/gif,image/jpeg,image/jpg,image/png,image/webp">
                <!-- </form> -->
            </div>
            <div class='loading'>
                <span class='loading-icon'></span>
                <p>正在上传</p>
            </div>
            <div class='img' id="imgShows">
            </div>
        </li>
    </ul>

当时一开始写的是files集合 然后去问了学长 最后是展开添加到form表单里的 还有个注意的点是file提交的时候后端那边会报个文件类型请求的错误 注意提交的时候data 不要用{}括起来

翻页的瀑布流
当时没明白往下滑也算一种翻页 然后上网搜了一下 是计算窗口的距离 然后调用接口
直接上js代码

// 先获取数据
// 公共接口
var current=1;
let compentUrl='http://101.43.229.81:8080/Diet/notes/getNote?noteNum=6&'
function getdrawMessage(){
//先调用一次 current是页数
    $.ajax({
        type: "GET",
        url: compentUrl+'pageNum='+current,
        headers: { 'Content-Type': 'application/json' },
        async: false,
        dataType:'json',
        data: {},
        success: function (result) {
            console.log(result);
        // 将数据保存在
       let newresultData=result.data;
       //计算窗口的距离
       $(window).scroll(function(){
        if (Math.round($(window).scrollTop() + $(window).height()) == $(document).height()) {
            current++;
            //再次调用接口 让数据增加 current++
            //得到第三第四页数据
            $.ajax({
                type: "GET",
                url: compentUrl+'pageNum='+current,
                headers: { 'Content-Type': 'application/json' },
                async: false,
                dataType:'json',
                data: {},
                success: function (result) {
                  //下面是渲染的内容
                    for(let i=0;i<result.data.length;i++){
                        console.log(result.data[i]);
                        console.log(result.data[i].noteImageList[0]);
                        console.log(newresultData[i]);
                        nodeList.innerHTML+=`<div class="nodeshow">
                        <a class="nodeShowphoto" th:href="@{noteOthers?noteId=${newresultData[i].noteImageList.id}}">
                            <img class='nodephoto' src=${newresultData[i].noteImageList.imageUrl==null?'../../static/images/meduDeatil/fouth.jpeg':newresultData[i].noteImageList}>
                        </a>
                        <div class="nodewords">
                            <a class="nodesmaTitle" th:href="@{noteOthers?noteId=${newresultData[i].noteImageList.id}">
                                ${newresultData[i].title}
                            </a>
                            <div class="noteUsershow clearFloat">
                                <a class="noteUserPhoto" th:href="@{homepage?userId=${newresultData[i].user.id}}">
                                    <img class='userphoto' src=${newresultData[i].user.picture}>
                                </a>
                                <a class="noteUername" th:href="@{homepage?userId=${newresultData[i].user.id}}">
                                ${newresultData[i].user.username}</a>
                                <div class="notelove">
                                    <i class="iconfont">&#xe61f;</i>
                                </div>
                            </div>
    
                        </div>
                    </div>`+`
                    <div class="nodeshow">
                        <a class="nodeShowphoto" th:href="@{noteOthers?noteId=${result.data[i].noteImageList.id}}">
                            <img class='nodephoto' src= ${result.data[i].imageUrl==null? '../../static/images/meduDeatil/third.jpeg':result.data[i].nodeImageList[i].imageUrl}>
                        </a>
                        <div class="nodewords">
                            <a class="nodesmaTitle" th:href="@{noteOthers?noteId=${result.data[i].noteImageList.id}">
                                ${result.data[i].title}
                            </a>
                            <div class="noteUsershow clearFloat">
                                <a class="noteUserPhoto" th:href="@{homepage?userId=${result.data[i].user.id}">
                                    <img class='userphoto' src=${result.data[i].user.picture}>
                                </a>
                                <a class="noteUername" th:href="@{homepage?userId=${result.data[i].user.id}}">
                                ${result.data[i].user.username}</a>
                                <div class="notelove">
                                    <i class="iconfont">&#xe61f;</i>
                                </div>
                            </div>
    
                        </div>
                    </div>
                    `

                    }
                }
            })
            
        }
    })
},
        error: function (err) {
            console.log(err)
        }
    })
}
getdrawMessage();