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

收获总结

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

<div class="goodstips">
                <div id="moreadd">
                    <div class="sendgoopage" id="1">             
                        <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)">
        	  
                            <div class="addphotolist">
                                <i class='iconfont' style="color:white;font-size: 20px;">
                                    
                                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 = `

                
                

                    
                        
                    
                
                

                    
                        添加商品详情图片
                    
                
            `
        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">
                
            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+=`

                        ${newresultData[i].noteImageList.id}}">
                            ${newresultData[i].noteImageList.imageUrl==null?'../../static/images/meduDeatil/fouth.jpeg':newresultData[i].noteImageList}>
                        
                        

                            ${newresultData[i].noteImageList.id}">
                                ${newresultData[i].title}
                            
                            

                                ${newresultData[i].user.id}}">
                                    ${newresultData[i].user.picture}>
                                
                                ${newresultData[i].user.id}}">
                                ${newresultData[i].user.username}
                                

                                    
                                
                            

`+`

${result.data[i].noteImageList.id}}">
${result.data[i].imageUrl==null? '../../static/images/meduDeatil/third.jpeg':result.data[i].nodeImageList[i].imageUrl}>


${result.data[i].noteImageList.id}">
${result.data[i].title}


${result.data[i].user.id}">
${result.data[i].user.picture}>

${result.data[i].user.id}}">
${result.data[i].user.username}






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