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

TP5整合阿里云OSS上传文件第二节,上传头像实现
首先先看一个效果图
上传失败效果图:

上传成功效果图:

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

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

由于页面太单挑的话会很难看所以自己写了样式 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, //不压缩imageauto: 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();});
// 文件上传失败，同样是添加Classuploader.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, //不压缩imageauto: 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;

页面中没有使用字体图标,只有在扩展样式里面我加了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:

<div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

TP5整合阿里云OSS上传文件第二节,异步上传头像实现,相关推荐

SpringBoot整合阿里云OSS，支持文件上传、下载、删除、加签等操作
首先附上OSS基本介绍和官方文档链接:https://help.aliyun.com/product/31815.html?spm=ata.21736010.0.0.25d67536bR4cly 另外 ...
SpringBoot整合阿里云OSS，传入文件为MultipartFile格式文件
我对普通的人类没有兴趣,你们只要是有外星人.未来人.异世界人.超能力者, 就尽管来找我吧!以上!----<凉宫春日的忧郁> 1. 去阿里云开通个人对象存储OSS服务点击创建Bucket, ...
SpringBoot整合阿里云OSS文件上传、下载、查看、删除
SpringBoot整合阿里云OSS文件上传.下载.查看.删除该项目源码地址:https://github.com/ggb2312/springboot-integration-examples ( ...
springboot整合阿里云oss上传的方法示例
这篇文章主要介绍了springboot整合阿里云oss上传的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 OSS申请和 ...
spring boot 整合阿里云oss上传
Spring Boot 整合阿里云OSS上传 OSS申请和配置 1. 注册登录 2.开通以及配置 springboot整合使用 1. 进入我们springboot的项目中,导入oss相关依赖 2. ...
django图片上传到oss_django 配置阿里云OSS存储media文件的例子
1. 安装django-aliyun-oss2-storage包 linux上用 pip install django-aliyun-oss2-storage 无报错,顺利安装 windows上报错: ...
微信头像下载并上传到阿里云OSS，PHP文件上传到阿里云OSS简单代码（OSS文件上传，微信头像下载，CURL下载文件，微信头像链接过期）
(就这么个小事,有多少公司多少项目没做到!!) 微信公众号项目,后端获取到授权用户的微信头像后,要自行下载保存,不下载的话,微信返回的头像链接会在一段时间后过期,无法访问! 下面是我写的两个简单实用方 ...
SpringBoot整合阿里云OSS
文章目录 SpringBoot整合阿里云OSS 1.准备工作 1.1 开通"对象存储OSS"服务 1.2 创建Bucket 1.3 创建RAM子用户 2.SpringBoot整合阿 ...
ThinkPHP5整合阿里云oss
[分享]ThinkPHP5整合阿里云oss 浏览:11716 发布日期:2016/12/24 分类:ThinkPHP5专区关键字: thinkphp5 OSS 整合社区推荐: 阿里云3月采购季活动 ...
【谷粒商城之整合阿里云OSS对象存储】
本笔记内容为尚硅谷谷粒商城整合阿里云OSS对象存储部分目录一 .简介二.云存储开通与使用 1.开通阿里云对象存储服务 2.创建bucket 3.创建子用户(获取密钥访问OSS服务器) 给该子账户 ...

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

TP5整合阿里云OSS上传文件第二节,异步上传头像实现,相关推荐

最新文章

热门文章