两种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+=``+`
`
}
}
})
}
})
},
error: function (err) {
console.log(err)
}
})
}
getdrawMessage();