一、普通form表单上传图片
通过ajax上传图片到图床，以下实例为七牛云
"formLogoID1" method="post" enctype="multipart/form-data" style="display: none;">"token" type="hidden" value="" id="shopTokenId" class="tokenClass" />"imagefile1" name="file" type="file" class="userfileClass" />
class="uploadImageClass" for="imagefile1">class="layui-upload-img upload-default-img" src="./images/photo.png" id="shopLogoImageID1">var uploadUrl1 = '';
$("#imagefile1").live("change", function() {
if (this.files.length != 0) {
var imgSize = (this.files[0].size / 1024 / 1024)
console.log(imgSize)
if (imgSize <= 3) {
ImageHandle1($("#shopLogoImageID1"), $("#formLogoID1").attr("id"));
} else {
layer.msg("图片大小超过3M，请重新选择", {
icon: 5
});
}
}
});
/**图片上传*/
function ImageHandle1(imgUrl, formID) {
var id = new FormData(document.getElementById(formID));
console.log(id)
$.ajax({
url: 'http://up.qiniu.com/',
type: 'POST',
data: id,
processData: false,
contentType: false,
success: function(res) {
console.log(res)
console.log("成功：" + JSON.stringify(res));
var srcUrl = domain + res.key;
console.log(srcUrl)
uploadUrl1 = srcUrl
imgUrl.attr("src", srcUrl);
imgUrl.css("width", "100%");
imgUrl.css("height", "100%");
console.log(uploadUrl1)
},
error: function(res) {
console.log("失败:" + JSON.stringify(res));
}
});
return false;
}二、layui和七牛云
七牛云不支持批量上传图片，但是可以根据layui图片上传组件的异步功能，实现批量上传，但是图片上传是异步上传，当图片大小有过大差距的时候，存在图片上传顺序错乱的情况，可以在done()中根据index进行排序，然后在allDone()一起提交
<div class="layui-form-item">
<label class="layui-form-label upload goods-desc" id="details"> 商品图：<span class="tips">不超过3M，格式为jpg，pngspan>label>
<div class="layui-upload" style="height:auto">
<button type="button" class="layui-btn" id="ImageDetails">上传图片button>
<div class="layui-upload-list multipleDetail showDetailsImg">
div>
div>
div>var DetailImg = new Array();
layui.use(['form', 'upload'], function() {
var form = layui.form;
var $ = layui.jquery;
var upload = layui.upload;
/*商品详情图片上传*/
var ImageDetails = upload.render({
elem: '#ImageDetails', //绑定元素
size: 3072,
multiple: true,
number: 30,
acceptMime: 'image/*',
url: 'http://up.qiniu.com', //该处为七牛云的上传接口
method: 'post',
data: {//主要是通过后台请求七牛云的url，获取token
token: function() {
var token;
$.ajax({
async: false, //ajax 非异步获取taken
type: 'post',
url: url,//后台接口
success: function(res) {
if (DetailImg.length == 30) {
layer.msg('最多只能上传30张', {
icon: 5
});
} else {
console.log(res)
token = JSON.parse(res).token;
}
}
});
return token;
}
},
before: function(obj) {
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result) {
// console.log(file) //{name: "1.jpg" size: 140000}
// console.log(result) //{data:image/jpeg;base64,}
if (DetailImg.length == 30) {
layer.msg('最多只能上传30张', {
icon: 5
});
} else {
let imgList = `![]()
${file.name}">+
`
$('.showDetailsImg').append(imgList)
}
});
},
done: function(res, index, upload) {
console.log(res);
if (DetailImg.length == 30) {
layer.msg('最多只能上传30张', {
icon: 5
});
} else {//由于图片上传是异步上传，所以存在图片上传顺序错乱的情况，可以根据index，进行重新排序
var index = index.split('-')[1]
console.log(index)
if (index == 0) {
sortArr = new Array();
}
var url = domain + res.key
sortArr.push({
index: index,
url: url
})
console.log(sortArr)
}
},
allDone: function(obj) { //当文件全部被提交后，才触发
console.log(obj);
if (sortArr.length > 1) {
sortArr.sort(compare)
for (var i = 0; i < sortArr.length; i++) {
DetailImg.push(sortArr[i].url)
}
} else {
DetailImg.push(sortArr[0].url)
}
console.log(DetailImg)
},
error: function() {
//演示失败状态，并实现重传
// return layer.msg('error');
return;
}
});
})
/*
* 详情图 图片删除
*/
$(".showDetailsImg").on('mouseenter mouseleave', '.img-box', function() {
$(this).find(".remove").css({
opacity: 0.5
})
$(this).find(".mb").css({
opacity: 1
})
})
$(".showDetailsImg").on('mouseleave', '.img-box', function() {
$(this).find(".remove").css({
opacity: 0
})
$(this).find(".mb").css({
opacity: 0
})
})
$(".showDetailsImg").on('click', '.remove', function() {
var parents = $(this).parent()[0]
var index = $(".showDetailsImg .img-box").index(parents);
console.log(index);
console.log(DetailImg)
DetailImg.splice(index, 1)
console.log(DetailImg)
$(this).parent().remove()
})
/*排序*/
function compare(obj1, obj2) {
var a = obj1.index;
var b = obj2.index;
return a - b;
}
三、动态渲染数据表格时，添加图片上传组件
重点：在渲染数据表格的时候，需要一起把上传按钮的点击事件一起渲染
class="layui-form-item ">class="layui-form-label goods-desc">产品规格：
class="specs">
class="box">
class="layui-input-block" style="margin-left: 15px;display: flex;">"text" name="network" autocomplete="off" placeholder="网络" class="layui-input" id="network" style="width: 50px;margin-right: 20px;">"text" name="newNetwork" autocomplete="off" class="layui-input" id="newNetwork" style="width: 150px;margin-right: 20px;">"button" class="layui-btn layui-btn-primary" style="width: 50px;padding: 0;" id="addNewNetwork">新增
class="showAddNewNetwork showAdd">
class="box">
class="layui-input-block" style="margin-left: 15px;display: flex;">"text" name="memory" autocomplete="off" placeholder="内存" class="layui-input" id="memory" style="width: 50px;margin-right: 20px;">"text" name="newMemory" autocomplete="off" class="layui-input" id="newMemory" style="width: 150px;margin-right: 20px;">"button" class="layui-btn layui-btn-primary" style="width: 50px;padding: 0;" id="addNewMemory">新增
class="showAddNewMemory showAdd">
class="box">
class="layui-input-block" style="margin-left: 15px;display: flex;">"text" name="color" autocomplete="off" placeholder="颜色" class="layui-input" id="color" style="width: 50px;margin-right: 20px;">"text" name="newColor" autocomplete="off" class="layui-input" id="newColor" style="width: 150px;margin-right: 20px;">"button" class="layui-btn layui-btn-primary" style="width: 50px;padding: 0;" id="addNewColor">新增
class="showAddNewColor showAdd">
"button" class="layui-btn" id="save">保存
<script type="text/html" id="showGoodsList">
<table>
<thead>
<tr>
<th>{{d.title1}}th>
<th>{{d.title2}}th>
<th>{{d.title3}}th>
<th>价格th>
<th>库存th>
tr>
thead>
<tbody>
{{# layui.each(d.data, function(index, item){ }}
<tr>
<td>{{item.network}}td>
<td>{{item.memory}}td>
<td class="picBox">
<div class="color">
{{item.color}}
div>
<div class="layui-upload addUpload">
<button type="button" class="layui-btn eachGoodsImgBtn" style="float: left; margin: 35px 10px 0 0">上传图片button>
<input class="layui-upload-file" type="file" accept="image/*" name="file">
<div class="layui-upload-list">
<img class="layui-upload-img ShowEachGoodsImg">
div>
div>
td>
<td class="eachPrice">
<input type="text" autocomplete="off" class="layui-input" placeholder="999">
td>
<td class="eachStock">
<input type="text" autocomplete="off" class="layui-input" placeholder="999">
td>
tr>
{{# }); }}
tbody>
table>
<script>var network = '';
var networkArr = new Array();
var memory = '';
var memoryArr = new Array();
var color = '';
var colorArr = new Array();
var goodsList = '';
var trIndex = '';
layui.use(['form', 'upload', 'laytpl'], function() {
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
var upload = layui.upload;
var laytpl = layui.laytpl;
//按钮保存生成规格表格
$("#save").click(function() {
var newArr = new Array();
if (network == '') {
network = "网络"
}
if (memory == '') {
memory = "内存"
}
if (color == '') {
color = "颜色"
}
if (networkArr == '' || memoryArr == '' || colorArr == '' || network == '' || memory == '' || color == '') {
layer.msg("请先添加内容，再保存", {
icon: 5
});
} else {
for (var i = 0; i < networkArr.length; i++) {
for (var j = 0; j < memoryArr.length; j++) {
for (var k = 0; k < colorArr.length; k++) {
newArr.push({
network: networkArr[i],
memory: memoryArr[j],
color: colorArr[k],
imgurl: '',
price: '',
stock: ''
})
}
}
}
console.log(newArr)
goodsList = {
title1: network,
title2: memory,
title3: color,
data: newArr
}
console.log(goodsList)
var getTpl = showGoodsList.innerHTML;
var view = document.getElementById('goodslist');
laytpl(getTpl).render(goodsList, function(html) {
view.innerHTML = html;
});
//重点:在渲染表格的时候，需要渲染upload组件，否则按钮的点击事件是无效的
uploadImgRender(".eachGoodsImgBtn");
}
})
//获取tr的索引
$("#goodslist").on("click", ".eachGoodsImgBtn", function() {
var gettr = $(this).parent().parent().parent()[0];
trIndex = $("#goodslist tbody tr").index(gettr);
console.log(gettr)
console.log(trIndex)
})
/*封装表格里单个图片上传*/
function uploadImgRender(e) {
var uploadEachGoods = upload.render({
elem: e, //绑定元素
size: 3072,
acceptMime: 'image/*',
url: 'http://up.qiniu.com/', //上传接口
method: 'post',
data: {
token: function() {
var token;
$.ajax({
async: false, //ajax 非异步获取taken
type: 'post',
url: url + 'type=third&method=qiniutoken&time=3600&space=images',
success: function(res) {
console.log(res)
token = JSON.parse(res).token;
}
});
return token;
}
},
before: function(obj) {
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result) {
$("#goodslist tbody tr").eq(trIndex).find(".layui-upload-list").css({
'display': 'block'
})
$("#goodslist tbody tr").eq(trIndex).find(".ShowEachGoodsImg").attr('src', result)
});
},
done: function(res, index, upload) {
console.log(res);
for (var i = 0; i < goodsList.data.length; i++) {
if (i == trIndex) {
goodsList.data[i].imgurl = domain + res.key; //damain 来自qiniu/formdata.js
}
}
console.log(goodsList)
},
error: function() {
//演示失败状态，并实现重传
return layer.msg('error');
}
});
}
})本文完。
扫一扫
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
