TP5+阿里雲OSS上傳文件第三節,實現淘寶上傳商品圖片

時間 2020-02-12

原文原文鏈接

**TP5+阿里雲OSS上傳文件第三節,實現淘寶上傳商品圖片
首先咱們來看看淘寶的功能和樣式:**
javascript

以後看看製做完成的演示:(因爲所有功能弄成GIF有點大,限制上傳大小好像在1M以內,壓縮以後也有1.9M,因此分爲兩個演示圖片);
css

後端代碼基於第三個文章不變;去掉上傳進度條,去掉上傳提示!
重寫webuploader.css
重寫uploader.js
前端代碼html: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>

前端代碼的基本樣式:java

<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.cssweb

.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 在移動以後刪除沒法從新上傳,今晚時間太晚了,明晚給修復了!
關於註釋,本次寫代碼沒有寫太詳細的註釋,你們湊合着看把!服務器