TP5+阿里云OSS上传文件第三节，实现上传淘宝商品图片

时间：2023-03-29 16:56:26 PHP

**TP5+阿里云OSS上传文件第三节，实现淘宝上传商品图片首先，我们看一下淘宝的功能和样式：**然后，看一下完成的demo：（由于所有功能都是做成GIF，有点大，上传受限大小好像在1M以内，压缩后有1.9M，所以分两张演示图）；后台代码基于第三篇不变；去掉上传进度条，去掉上传提示！重写webuploader.css重写uploader.js前端代码html:需要jquesy.jswebuploader.js前端代码html:

谍?爬

谍?????????前端代码的基础样式:修改webuploader.css.webuploader-container{position:relative;}.webuploader-element-invisible{position:absolute!important;剪辑：矩形（1px1px1px1px）；/*IE6,IE7*/clip:rect(1px,1px,1px,1px);}.webuploader-pick{position:relative;显示：内联块；游标：指针；宽度：100px；高度：100px；行高：35px；字体大小：14px；颜色：#fff；文本对齐：居中；边界半径：4px；溢出：隐藏；边距：15px；背景：url("../img/up.png")无重复中心；空白：nowrap；vertical-align:middle;}.webuploader-pick-disable{opacity:0.6;pointer-events:none;}upload.js/***User:LiHaotian*Date:2018/5/20*Time:00:27*Email:haotian0607@gmail.com*/$(function(){//创建上传器实例WebUploader.create({server:uploaderUrl,//服务端异步接受地址！duplicate:true,pick:{id:".upBtn",multiple:false,//禁止多选},resize:false,//不压缩图片auto:true,//选中后自动上传swf:'../flash/Uploader.swf',//防止低版本browsersfromusingWhenitcomestoflash//只允许选择图片文件。接受：{title:'Images',extensions:'gif,jpg,jpeg,bmp,png',mimeTypes:'image/*'}}).on('fileQueued',function(file){varuploaderId='#rt_'+file.source.ruid;$item=$(uploaderId).parents('.item');$item.find('.inner').show();$item.find('.upBtn').hide();var$li=$(''),$img=$li.find('img');$item.append($li);/***创建预览图像*@type{number|undefined}*/$ImgId=$item.find($("input[name='imgId']"));if(!$ImgId.length){$ImgId=$item.append('');}/***预览属性*@type{number}*/varthumbnailWidth=100,thumbnailHeight=100;this.makeThumb(file,function(error,src){if(error){$img.replaceWith('不能预览');return;}$img.attr('src',src);},thumbnailWidth,thumbnailHeight);}).on('uploadSuccess',function(file,response){varuploaderId='#rt_'+file.source.ruid;var$item=$(uploaderId).parents('.item');//$item.find('.upBtn').remove();$item.find($("input[name='imgId']")).val(response.data.imgId);})});操作页面中删除,左交换位置的js演示地址：http://www.yaojinbu.cnhttp://li-8.com因为上传文件到阿里云服务器需要花钱，所以后端返回虚假数据！避免恶意上传！有搬家后删除后无法重新上传的BUG。今晚太晚了，明天晚上就修好了！关于注释，我这次写代码的时候没有写太详细的注释，大家凑合吧！

上一篇：PHP-生成二维码（qr-code）

下一篇：php证书照片更改背景颜色php人像抠图php更改背景图

TP5+阿里云OSS上传文件第三节，实现上传淘宝商品图片相关文章