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

**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 在移动之后删除无法重新上传,今晚时间太晚了,明晚给修复了!
关于注释,本次写代码没有写太详细的注释,大家凑合着看把!