摘要：版本也是我最喜歡的方式這個代碼有點黏在一起了湊合看把李昊天創建實例服務器異步接受地址指定選擇文件的按鈕容器禁止多選不壓縮選擇之后自動上傳防止低版本瀏覽器用到了只允許選擇圖片文件。

TP5整合阿里云OSS上傳文件第二節,上傳頭像實現
首先先看一個效果圖
上傳失敗效果圖:

上傳成功效果圖:

使用的插件以及UI庫:
webuploader
bootstrap
jquery
自己擴展了幾個樣式 大家修改樣式很簡單,相信各位都沒什么可說的!
也在壓縮包里面,大家可以參考一下!

代碼里面全部都有很明確的注釋,
這次實現的只有前端邏輯以及上傳到阿里云服務器,并沒有修改數據庫,由于天色已晚,剩下的就有時間再寫把!
首先去下載webuploader插件 地址傳送門:https://github.com/fex-team/w...
下載之后我們根據自己需要選擇,本次代碼中使用的是完整版壓縮版本的!

由于頁面太單挑的話會很難看 所以自己寫了樣式 up.css來讓頁面稍微好看點(沒考慮頁面兼容性,反正在我電腦是正常的 (^▽^))
有header 頭部 footer 底部 nav.menu側邊欄導航以及main內容區域

將之前的up.html改成如下結構;

    
    
    
    {{css href="/static/css/webuploader.red.css,https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.css,/static/css/up.css"}}
    




    
    

        
    

    選擇文件




{{js href="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js,/static/js/webuploader.min.js,/static/js/upload.js"}}

里面有幾個文件說一下
bootstrap.css 不用說大家都知道的,我用的是cdn 沒有下載到本地;
webuploader.red.css 是上傳按鈕美化的樣式,(里面代碼不多) 這個是我修改之后的 原來的按鈕的藍色的 我并不太喜歡 喜歡這種紅色! 修改的還有一個黑色,默認的也在壓縮包里面!
up.css 主要就是頁面的樣式和提示框,進度條 之類的樣式

jquery.min.js 不用說大家也都知道的,用的是cdn 沒有下載到本地;
webuploader.min.js 組件核心文件 里面代碼超級多
upload.js 上傳的前端邏輯代碼 也是核心代碼

這里只說一下 upload.js 代碼 其他的沒什么說的,
版本1:

/**
 * User: 李昊天
 * Date: 2018/5/18
 * Time: 1:15
 * Email: haotian0607@gmail.com
 */
$(function () {
    var $face = $("#face"), thumbnailWidth = 100, thumbnailHeight = 100;
    //創建uploader實例
    var uploader = WebUploader.create({
        server: uploaderUrl, //服務器異步接受地址!
        pick: {
            id: "#changeFile", //指定選擇文件的按鈕容器
            multiple: false, //禁止多選
        },
        resize: false, //不壓縮image
        auto: true, //選擇之后自動上傳
        swf: "../flash/Uploader.swf", //防止低版本瀏覽器 用到了flash
        // 只允許選擇圖片文件。
        accept: {
            title: "Images",
            extensions: "gif,jpg,jpeg,bmp,png",
            mimeTypes: "image/*"
        }
    });
    // 當有文件添加進來的時候
    uploader.on("fileQueued", function (file) {
        var $img = $face.find("img"); //獲取到頭像的DOM
        // 創建縮略圖
        uploader.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith("不能預覽");
                return;
            }
            $img.attr("src", src);
        }, thumbnailWidth, thumbnailHeight);
    });
    // 文件上傳過程中創建進度條實時顯示。
    uploader.on("uploadProgress", function (file, percentage) {
        $percent = $face.find(".progress .progress-bar");
        // 避免重復創建
        if (!$percent.length) {
            //構建進度條DOM
            $face.append("
"); //這個是提示框
            $percent = $("
").appendTo($face).find("progress-bar");
        }
        $percent.css({"width": 50 + "%"}); //讓進度條動起來
    });
// 文件上傳成功，給dialog添加class, 用樣式標記上傳成功。
    uploader.on("uploadSuccess", function (file) {
        //找到頭像DIV下面的dialog  添加一個success的樣式類將內容改變成上傳成功并且顯示!
        $face.find(".dialog").addClass("success").text("上傳成功").show();
    });
// 文件上傳失敗，同樣是添加Class
    uploader.on("uploadError", function (file) {
        //找到頭像DIV下面的dialog  添加一個error的樣式類將內容改變成上傳失敗并且顯示!
        $face.find(".dialog").addClass("error").text("上傳失敗").show();
    });
// 完成上傳完了，成功或者失敗，先刪除進度條。
    uploader.on("uploadComplete", function (file) {
        $face.find(".progress").remove();
    });
});

版本2:也是我最喜歡的方式,這個代碼有點黏在一起了,湊合看把!

/**
 * User: 李昊天
 * Date: 2018/5/18
 * Time: 1:15
 * Email: haotian0607@gmail.com
 */
$(function () {
    var $face = $("#face"), thumbnailWidth = 100, thumbnailHeight = 100;
    //創建uploader實例
    WebUploader.create({
        server: uploaderUrl, //服務器異步接受地址!
        pick: {
            id: "#changeFile", //指定選擇文件的按鈕容器
            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 $img = $face.find("img"); //獲取到頭像的DOM
        // 創建縮略圖
        this.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith("不能預覽");
                return;
            }
            $img.attr("src", src);
        }, thumbnailWidth, thumbnailHeight);
    }).on("uploadProgress", function (file, percentage) {
        // 文件上傳過程中創建進度條實時顯示。
        $percent = $face.find(".progress .progress-bar");
        // 避免重復創建
        if (!$percent.length) {
            //構建進度條DOM
            $face.append("
"); //這個是提示框
            $percent = $("
").appendTo($face).find("progress-bar");
        }
        $percent.css({"width": 50 + "%"}); //讓進度條動起來
    }).on("uploadSuccess", function (file) {
// 文件上傳成功，給dialog添加class, 用樣式標記上傳成功。
        //找到頭像DIV下面的dialog  添加一個success的樣式類將內容改變成上傳成功并且顯示!
        $face.find(".dialog").addClass("success").text("上傳成功").show();
    }).on("uploadError", function (file) {
// 文件上傳失敗，同樣是添加Class
        //找到頭像DIV下面的dialog  添加一個error的樣式類將內容改變成上傳失敗并且顯示!
        $face.find(".dialog").addClass("error").text("上傳失敗").show();
    }).on("uploadComplete", function (file) {
// 完成上傳完了，成功或者失敗，先刪除進度條。
        $face.find(".progress").remove();
    });
});

最后給大家看看擴展的樣式:
默認的

紅色:顏色值:#E4393c;

黑色:顏色值:#222222;

頁面中沒有使用字體圖標,只有在擴展樣式里面我加了svg背景,使用的是偽元素,

.webuploader-pick:before{
    content:"";
    display: inline-block;
    width:20px;
    height: 20px;
    background: url("../img/upload-1.svg");
    z-index: 999;
    background-size: 100% 100%;
    position: relative;
    top:4px;
}

對于新手朋友:
拿到代碼之后創建一個控制器
渲染視圖,視圖中將up.html復制進去;
然后將靜態資源文件放到public/static/文件夾下

如果不寫使用bs庫的朋友可以用下面的代碼代替進度條
css:

.progress {
 height: 20px;
 margin-bottom: 20px;
 overflow: hidden;
 background-color: #f5f5f5;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
 float: left;
 width: 0;
 height: 100%;
 font-size: 12px;
 line-height: 20px;
 color: #fff;
 text-align: center;
 background-color: #428bca;
 -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
 -webkit-transition: width .6s ease;
 transition: width .6s ease;
}
.progress-bar-success {
 background-color: #5cb85c;
}
/*bootstrap.css文件第4555行～第4557行*/
.progress-bar-info {
 background-color: #5bc0de;
}
/*bootstrap.css文件第4562行～第4564行*/
.progress-bar-warning {
 background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行～第4571行*/
.progress-bar-danger {
 background-color: #d9534f;
}

html: