js图片上传(配合七牛云)

我是用bootstrap+layer+jQuery做的，一些样式使用了bootstrap和layer的样式，如果不使用这两个框架可以自行修改样式。这篇博客主要是说功能实现。

上传操作主要是通过input来实现的

<input type="file" id="cardFileupload" class="x-file" accept="image/*" />

效果如下图：

因为上传input的样式并不好看，我们也无法修改其样式，所以就想了一个办法：用一个按钮代替这个input执行上传操作，主要实现方式是想办法隐藏input框，在点击按钮的时候让它去触发input的方法。

<!-- 上传图片 -->
<div id="box"><div class="form-group"><label class="col-sm-3 control-label">图片：</label><div class="col-sm-9"><!--选择图片按钮--><button id="btnCardAdd" class="btn btn-primary" type="button" onclick="document.getElementById('cardFileupload').click();"><i class="fa fa-plus"></i>&nbsp;&nbsp;选择图片</button><!--实际执行上传操作--><input type="file" id="cardFileupload" class="x-file"  onchange="parts_manage.loadLocalImage(this,'cardImage',0);" accept="image/*"/></div></div><div class="form-group"><label class="col-sm-3 control-label"></label><div class="col-sm-9"><!--图片展示区域--><ul id="uploadImgBox"></ul></div></div>
</div>

页面结构和样式好了之后我们就开始写功能了。
我首先是把图片上传至七牛云拿到一个图片地址之后，再去往页面上添加标签。

//点击按钮触发此方法，用于图片上传
loadLocalImage: function(fileObject, imageID, imageType) {if(typeof FileReader == 'undefined') {alert("当前浏览器不支持FileReader接口");return;}var file = fileObject.files[0];let reader = new FileReader() ;//新建一个FileReader对象reader.readAsDataURL(file) ;//将读取的文件转换成base64格式reader.onload = function(e) {var bytes = window.atob(e.target.result.split(',')[1]); //去掉url的头，并转换为byte//处理异常,将ascii码小于0的转换为大于0var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for (var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}//获取图片的blob对象，因为上传至七牛云需要blob对象var blobData = new Blob([ab], {type: 'image/png'});// 图片上传至七牛云parts_manage.qiniuUpload(blobData,file.name,$('#uploadImgBox'));}
},

/**七牛云上传图片* cardImageUrl-----需要上传图片的bolb地址* fileName-----上传图片的原文件名* nodeObj------显示图片的盒子* */
qiniuUpload: function(cardImageUrl, fileName, nodeObj) {//获取七牛云token，这个需要请求后台接口获得$.ajax({url: win.utils.services.getQiniuToken,type: 'get',dataType: 'json',success: function (res) {var qiniuToken = res.token;//拿到token之后，请求七牛云，将图片上传至七牛云var observable = qiniu.upload(cardImageUrl, //上传图片的blob对象fileName, //图片名qiniuToken, //token{fname: fileName,params: {}, //用来放置自定义变量mimeType: null}, {useCdnDomain: true,region: qiniu.region.z0});observable.subscribe({complete(res) {//图片上传成功之后，获取图片地址，添加到img标签的src内，连同其他标签元素一起追加到图片显示区域var qiniuImgUrl = '在七牛云网站上创建的存储空间名称地址'+res.key;nodeObj.append('<li>\n' +'<img class="cardImage" style="margin-top: 10px; width: 100px; height: 100px; max-width: 400px; border: 10px solid #EEEEEE;" src='+qiniuImgUrl+' />\n' +'<span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>\n' +'</li>');}});}});
},

删除图片方法：
查了一些资料发现js好像没有办法直接删除上传至七牛云的图片，需要后台写接口去做这个操作，所以我这里只写了删除显示的图片。

// 删除上传图片
$('#uploadImgBox').on('click','span',function () {$(this).parents('li').remove();
});

上传多个图片也可以实现：

js上传图片到七牛云参考：https://developer.qiniu.com/kodo/sdk/1283/javascript
后台获取七牛云token：https://www.jianshu.com/p/f71349f4762a

js图片上传(配合七牛云)相关推荐

将base64编码图片上传到七牛云
将base64编码图片上传到七牛云接口说明 FAQ >对象存储 >上传下载> 如何上传base64编码图片到七牛云在七牛云FAQ上有一篇文章,讲解的接口的使用 https://d ...
【Go实战 | 电商平台】(7) 图片上传到七牛云
文章目录 1. 获取配置信息 2. config 3. upload 完整代码这一章节中我们介绍如何把图片上传到七牛云,并且返回对应图片的 url .因为后续我们的创建的商品,更换头像等等都是把我们 ...
Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。
开始之前,需要强调的是Simditor富文本编辑器是基于Jquery的.所以必须引入Jquery.Simditor下载地址下载解压后会发现是整个simditor项目,很多东西项目根本不需要,只需要将 ...
php七牛云批量上传,七牛云——批量将本地图片上传到七牛云
前言在本地大概有10w左右的头像图片,打算批量上传到七牛云,寻找后发现了一个神奇的官方工具,十分的好用工具资源批量上传和多文件上传我这里上传本地用的是QsunSync QsunSync Git ...
PHP图片加水印，然后将加水印的图片上传到七牛云
今天项目有这么一个需求,简单实现了一下,当然用起来是没有任何问题的,现在把实现代码分享给小伙伴们 public function uploadImgToQiniu($picture_id){$wate ...
图片上传到七牛云存储空间
html页面如下 <label for="author">图片</label> <div id="uparea"><i ...
将本地图片上传至七牛云
准备工作一个域名(用来融合CDN加速) 七牛云创建一个存储空间七牛云绑定域名在注册完七牛云并创建了一个存储空间后,七牛云会给你自动分配一个融合 CDN 测试域名,但是只有30天的有效期.所以要在 ...
Java实现将文件(图片)上传到七牛云对象存储，并实现下载和删除功能
引言:在搭建项目时如果把上传的文件存储在该项目运行的主机上,会导致访问该项目时加载非常缓慢,因此需要对象存储.并且对象存储具有网站数据动静分离,大幅提升网页性能,储存节点多,支持跨地域实时同步,成本低 ...
前端怎样使用base64图片上传到七牛云
先通过后端拿到 domain 和 token 值其实就是后端通过七牛仓库的一些配置返为 domain 和 token let url = globalAjaxUrl + '/admin/bann ...
图片上传到七牛云/阿里云的OSS
1.准备七牛云/阿里云OSS https://github.com/pfinal/storage 2.composer安装包安装composer require pfinal/storage 本地 ...

js图片上传(配合七牛云)

js图片上传(配合七牛云)相关推荐

最新文章

热门文章