**TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片
首先我们来看看淘宝的功能和样式:**
之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9M,所以分为两个演示图片);
后端代码基于第三个文章 不变;去掉上传进度条,去掉上传提示!
重写webuploader.css
重写uploader.js
前端代码html:
需要jquesy.js webuploader.js
前端代码html:
<div class="items">
<div class="item">
<div class="upBtn"></div>
<div class="inner">
<a href="javascript:;" class="icon left">??</a>
<a href="javascript:;" class="icon right">??</a>
<a href="javascript:;" class="icon delete"></a>
</div>
</div>
<div class="item">
<div class="upBtn"></div>
<div class="inner">
<a href="javascript:;" class="icon left">??</a>
<a href="javascript:;" class="icon right">??</a>
<a href="javascript:;" class="icon delete"></a>
</div>
</div>
<div class="item">
<div class="upBtn"></div>
<div class="inner">
<a href="javascript:;" class="icon left">??</a>
<a href="javascript:;" class="icon right">??</a>
<a href="javascript:;" class="icon delete"></a>
</div>
</div>
<div class="item">
<div class="upBtn"></div>
<div class="inner">
<a href="javascript:;" class="icon left">??</a>
<a href="javascript:;" class="icon right">??</a>
<a href="javascript:;" class="icon delete"></a>
</div>
</div>
<div class="item">
<div class="upBtn"></div>
<div class="inner">
<a href="javascript:;" class="icon left">??</a>
<a href="javascript:;" class="icon right">??</a>
<a href="javascript:;" class="icon delete"></a>
</div>
</div>
<div class="item">
<div class="upBtn"></div>
<div class="inner">
<a href="javascript:;" class="icon left">??</a>
<a href="javascript:;" class="icon right">??</a>
<a href="javascript:;" class="icon delete"></a>
</div>
</div>
</div>前端代码的基本样式:
<style>
div.items {
float: right;
width: 900px;
margin-top: 100px;
}
div.item {
border: 1px solid #333;
width: 130px;
height: 140px;
float: left;
margin-right: 10px;
background: #CCC;
border-radius: 3px;
cursor: pointer;
text-align: center;
position: relative;
}
div.item .inner {
position: absolute;
bottom: 0;
width: 100%;
height: 23px;
border-top: #ccc;
background: #FFF;
padding-top: 1px;
display: none;
}
div.inner a {
text-decoration: none;
}
div.inner a.left, div.inner a.right {
color: #48B787;
font-size: 14px;
margin-right: 10px;
margin-left: 10px
}
div.inner a.delete {
color: #E4393c;
/*font-weight: bold;*/
margin-left: 10px
}
div.item .thumbImg {
width: 120px;
height: 115px;
margin: 3px;
}
div.item .thumbImg img {
width: 100%;
height: 100%;
border-radius: 3px;
}
</style>修改后的webuploader.css
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
width:100px;
height: 100px;
line-height: 35px;
font-size: 14px;
color: #fff;
text-align: center;
border-radius: 4px;
overflow: hidden;
margin: 15px;
background: url("../img/up.png") no-repeat center;
white-space: nowrap;
vertical-align: middle;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}upload.js
/**
* User: 李昊天
* Date: 2018/5/20
* Time: 00:27
* Email: haotian0607@gmail.com
*/
$(function () {
//创建uploader实例
WebUploader.create({
server: uploaderUrl, //服务器异步接受地址!
duplicate: true,
pick: {
id: ".upBtn",
multiple: false, //禁止多选
},
resize: false, //不压缩image
auto: true, //选择之后自动上传
swf: ‘../flash/Uploader.swf‘, //防止低版本浏览器 用到了flash
// 只允许选择图片文件。
accept: {
title: ‘Images‘,
extensions: ‘gif,jpg,jpeg,bmp,png‘,
mimeTypes: ‘image/*‘
}
}).on(‘fileQueued‘, function (file) {
var uploaderId = ‘#rt_‘ + file.source.ruid;
$item = $(uploaderId).parents(‘.item‘);
$item.find(‘.inner‘).show();
$item.find(‘.upBtn‘).hide();
var $li = $(‘<div id="‘ + file.id + ‘" class="thumbImg"><img></div>‘),
$img = $li.find(‘img‘);
$item.append($li);
/**
* 创建预览图
* @type {number | undefined}
*/
$ImgId = $item.find($("input[name=‘imgId‘]"));
if (!$ImgId.length) {
$ImgId = $item.append(‘<input name="imgId" type="hidden">‘);
}
/**
* 预览图属性
* @type {number}
*/
var thumbnailWidth = 100, thumbnailHeight = 100;
this.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith(‘<span>不能预览</span>‘);
return;
}
$img.attr(‘src‘, src);
}, thumbnailWidth, thumbnailHeight);
}).on(‘uploadSuccess‘, function (file, response) {
var uploaderId = ‘#rt_‘ + file.source.ruid;
var $item = $(uploaderId).parents(‘.item‘);
// $item.find(‘.upBtn‘).remove();
$item.find($("input[name=‘imgId‘]")).val(response.data.imgId);
})
});操作页面中删除,左右互换位置的js
<script>
$(function () {
$("body").on(‘click‘, ‘.delete‘, function () {
$(this).parents(‘.item‘).find(‘.inner‘).hide().siblings(‘.upBtn‘).show().siblings(‘.thumbImg,input‘).remove();
});
var allIndex = $(".items .item").size() - 1;
$("body").on(‘click‘, ‘.left‘, function () {
var that = $(this), index = that.parents(‘.item‘).index(), currentObj = that.parents(‘.item‘),
currentObjHtml = currentObj.html(), preObj = that.parents(‘.items‘).find(‘.item‘).eq(index - 1),
preObjHtml = preObj.html();
if (index <= 0 || index > allIndex) return;
currentObj.html(preObjHtml);
preObj.html(currentObjHtml);
});
$("body").on(‘click‘, ‘.right‘, function () {
var that = $(this), index = that.parents(‘.item‘).index(), currentObj = that.parents(‘.item‘),
currentObjHtml = currentObj.html(), nextObj = that.parents(‘.items‘).find(‘.item‘).eq(index + 1),
nextObjHtml = nextObj.html();
if (index > allIndex) return;
currentObj.html(nextObjHtml);
nextObj.html(currentObjHtml);
});
});
</script>演示地址:
http://www.yaojinbu.cn
http://li-8.com
由于上传文件到阿里云服务器需要钱的,所以后端返回的是假数据!以免有人恶意上传!
有一个bug 在移动之后删除无法重新上传,今晚时间太晚了,明晚给修复了!
关于注释,本次写代码没有写太详细的注释,大家凑合着看把!