**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: /5/20* Time: 00:27* Email: haotian0607@*/$(function () {//创建uploader实例WebUploader.create({server: uploaderUrl, //服务器异步接受地址!duplicate: true,pick: {id: ".upBtn",multiple: false, //禁止多选},resize: false, //不压缩imageauto: 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://li-
由于上传文件到阿里云服务器需要钱的,所以后端返回的是假数据!以免有人恶意上传!
有一个bug 在移动之后删除无法重新上传,今晚时间太晚了,明晚给修复了!
关于注释,本次写代码没有写太详细的注释,大家凑合着看把!
