TP5整合阿里云OSS上传文件第二节,异步上传头像

浏览:713 发布日期:2018/05/18 分类:功能实现 关键字: 阿里云OSS tp5 头像上传
TP5整合阿里云OSS上传文件第二节,上传头像实现
首先先看一个效果图
上传失败效果图:

上传成功效果图:


使用的插件以及UI库:
webuploader
bootstrap
jquery
自己扩展了几个样式 大家修改样式很简单,相信各位都没什么可说的!
也在压缩包里面,大家可以参考一下!

代码里面全部都有很明确的注释,
这次实现的只有前端逻辑以及上传到阿里云服务器,并没有修改数据库,由于天色已晚,剩下的就有时间再写把!
首先去下载webuploader插件 地址传送门:https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
下载之后我们根据自己需要选择,本次代码中使用的是完整版压缩版本的!


由于页面太单挑的话会很难看 所以自己写了样式 up.css来让页面稍微好看点(没考虑页面兼容性,反正在我电脑是正常的 (*^▽^*))
有header 头部 footer 底部 nav.menu侧边栏导航以及main内容区域

将之前的up.html改成如下结构;<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {{css href="/static/css/webuploader.red.css,https://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.css,/static/css/up.css"}}
    <title>Document</title>
</head>
<body>
<header></header>
<main class="container">
    <nav class="menu"></nav>
    <div id="face">
        <img src="http://passport.onethink.cn/Avatar/000/030/47/06/original.gif" alt="" class="img-thumbnail">
    </div>
<div id="changeFile">
    选择文件
</div>
</main>
<footer></footer>
<script>
    var uploaderUrl = "{{:url('uploadFile')}}";
</script>
{{js href="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js,/static/js/webuploader.min.js,/static/js/upload.js"}}

</body>
</html>
里面有几个文件说一下
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('<span>不能预览</span>');
                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('<div class="dialog"></div>'); //这个是提示框
            $percent = $('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"><span></span></div></div>').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('<span>不能预览</span>');
                return;
            }
            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);
    }).on('uploadProgress', function (file, percentage) {
        // 文件上传过程中创建进度条实时显示。
        $percent = $face.find(".progress .progress-bar");
        // 避免重复创建
        if (!$percent.length) {
            //构建进度条DOM
            $face.append('<div class="dialog"></div>'); //这个是提示框
            $percent = $('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"><span></span></div></div>').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;


下次有时间将剩余的再继续写下去!共同进步,大家加油,最后祝ThinkPHP越做越好!

附件 code.zip ( 168.08 KB 下载:25 次 )

评论( 相关
后面还有条评论,点击查看>>