JS上传图片到七牛云

一、预览

上传前

上传后

二、代码实现

1. H5代码

因为在modal内实现，所以直接贴modal

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content animated bounceInRight"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button><h4 class="modal-title">添加轮播图</h4></div><div class="modal-body"><div class="row"><label for="inputUpload" id="fileBtn_add" class="col-sm-2"><input type="file" accept="image/*" name="inputUpload" id="inputUpload" onchange="upload(this)" class="hide" multiple="multiple"><img src="img/image_add.png" class="addImg"/></label></div><div class="form-group form-row" id="preViewMore"><div class="row"><div id="inputImagePreview"></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" data-dismiss="modal">保存</button></div></div></div>
</div>

2. JS部分

//添加图片
function upload(c) {"use strict";var $show = $("#inputImagePreview");var $input = c,file = $input.files[0],reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e) {$("#fileBtn_add").hide(); /// 隐藏上传部分$show.append('<div class="col-sm-4 addImage"><img src="' + e.target.result + '"/><a id="delClose" class="delClose">X</a></div>'); /// 手动添加图片删除按钮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/'+file.name.split(".")[1]});// 图片上传至七牛云qiniuUpload(blobData,file.name+Math.floor(Math.random()*(100000-1) + 1) /// 加随机数避免因为重复图片名称导致 上传失败);};
}/// 上传到七牛云
function qiniuUpload(cardImageUrl, fileName){"use strict";$.ajax({url: baseUrl+"/file/token", //请求获取七牛云的tokentype: 'POST',success: function(data){var observable = qiniu.upload(cardImageUrl, //上传图片的blob对象fileName, //图片名data.data.token, //token{fname: fileName,params: {}, //用来放置自定义变量mimeType: null}, {useCdnDomain: true,region: qiniu.region.z0});observable.subscribe({complete(res) {var qiniuImageAddress = '七牛云存储地址'+res.key;}});},error: function(err){console.log(err)}})
}

3. CSS部分

.addImage{height: 100px;width: 100px;background-color: #fff;vertical-align: middle;margin-left: 5px;margin-right: 5px;margin-bottom: 5px;
}.addImage img{width: auto;height: auto;max-width: 100%;max-height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}.delClose{height: 20px;width: 20px;color: white;background-color:#585656;border-radius:50%;position: absolute;right: 0;text-align: center
}

JS上传图片到七牛云相关推荐

Js上传图片到七牛云(直接上代码)
准备工作: 1.七牛云传图片有多种方式,分为前端上传和后端上传,采用前端上传的最大的好处就是将减轻了服务器压力. 2.由于有些小朋友不想看官网的代码(本人认为官网好多"废话"'), ...
html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
前端上传图片到七牛云
前端如何上传图片到七牛云流程: 1.七牛云后台的对象存储功能 2.node.js后台生成七牛云的token 3.前端利用element UI/ice 的upload组件 4.文件名和token作为参 ...
小程序上传图片到七牛云
小程序上传图片到七牛云一.创建七牛云账号,获取ak.sk,创建对象存储空间名称二.服务端接口获取七牛token值,个人使用的php编写的 ...
前端如何上传图片到七牛云
From: https://www.jianshu.com/p/7520e0bee777 前端如何上传图片到七牛云流程: 生成token => token和图片作为new FromData() ...
koa2 + vue上传图片到七牛云
1.首先安装插件 koa-multer 用于上传图片和qiniu. npm install --save koa-multer npm install --save koa-qiniu 2.新建文件q ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...
uni-app 上传图片到七牛云
uni-app 上传图片到七牛云我的流程是:在上传图片到七牛之前,先调后端提供的接口获取token.key等,然后通过uni.uploadFile把token.key传给七牛: token:从后端获 ...
React中：富文本编辑器(react-quill),自定义上传图片到七牛云
1.组件封装 import React, { useState, useEffect, useRef } from 'react'; import ReactQuill from 'react-qui ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...

JS上传图片到七牛云

一、预览

二、代码实现

1. H5代码

2. JS部分

3. CSS部分

JS上传图片到七牛云相关推荐

最新文章

热门文章