js上传图片到七牛云存储
<!doctype html>
<html lang="zh">
<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">
<title>js上传图片到七牛</title>
<style>
#container{
width:200px;
height:200px;
border:1px solid #9d9d9d;
border-radius: 6px;
margin:50px auto;
position: relative;
overflow: hidden;
}
.upload-progress{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
background: rgba(0,0,0,0.5);
z-index: 5;
color:#fff;
line-height: 200px;
text-align: center;
display: none;
}
#uploadImage{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
z-index: 2;
text-align: center;
line-height: 200px;
cursor: pointer;
}
#container img{
width:100%;
position: absolute;
top:0;
left:0;
z-index: 1;
}
</style>
</head>
<body>
<div id="container">
<div id="uploadImage">选择文件</div>
<div class="upload-progress"></div>
</div> <script src="/moxie.js"></script>
<script src="/plupload.min.js"></script>
<script src="/qiniu.js"></script>
<script>
var uploader = Qiniu.uploader({
disable_statistics_report: false, // 禁止自动发送上传统计信息到七牛，默认允许发送
runtimes: 'html5,flash,html4', // 上传模式，依次退化
browse_button: 'uploadImage', // 上传选择的点选按钮，必需
container: 'container', // 上传区域DOM ID，默认是browser_button的父元素
max_file_size: '100mb', // 最大文件体积限制
flash_swf_url: 'Moxie.swf', // 引入flash，相对路径
dragdrop: false, // 关闭可拖曳上传
chunk_size: '4mb', // 分块上传时，每块的体积
multi_selection: !(moxie.core.utils.Env.OS.toLowerCase() === "ios"),
uptoken_url: 'XXX', // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置,uptoken是上传凭证，由其他程序生成;uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func;其优先级为uptoken > uptoken_url > uptoken_func
domain: 'XXX', // bucket域名，下载资源时用到，必需
get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken
auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
max_retries: 3, // 上传失败最大重试次数
save_key: true,
resize: { // 想限制上传图片尺寸，直接用resize这个属性
width: 300,
height: 300
},
init: {
'FilesAdded': function(up, files) { // 文件添加进队列后，处理相关的事情
plupload.each(files, function(file) {
console.log(file)
});
},
'BeforeUpload': function(up, file) { // 每个文件上传前，处理相关的事情
console.log("开始上传之前");
$(".upload-progress").show();
},
'UploadProgress': function(up, file) { // 每个文件上传时，处理相关的事情
console.log("上传中");
$(".upload-progress").html("上传进度:"+file.percent + "%");
},
'FileUploaded': function(up, file, info) { // 每个文件上传成功后，处理相关的事情
console.log("上传成功");
$(".upload-progress").hide();
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = "http://qiniu.com/"+res.key;
$("#container").append(img);
},
'Error': function(up, err, errTip) {
console.log("上传出错")
},
'UploadComplete': function() {
//队列文件处理完毕后，处理相关的事情
}
}
});
</script>
</body>
</html>
1、这个uploader初始化的时候如果放在change事件中是不会执行的
2、分块上传时，一些分辨率或者色彩密度较高的图片不支持切片
3、点击选择文件之后函数不执行的原因可能有：1）browse_button和container的值写成了class，但是不支持class，需要改成id名；2）函数没有初始化；3）后台返回来的token字段不正确，如果是这个原因，可以尝试将token改为uptoken
最后附上七牛官方的上传demo
作者：Eternal丶
链接：https://www.jianshu.com/p/1e53415afb09
js上传图片到七牛云存储的更多相关文章
- ueditor上传图片到七牛云存储（form api,java）
转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 ...
- Kindeditor上传图片到七牛云存储插件（PHP版）
由于工作需要,要使用第三方存储作为图床,发现七牛云挺不错,又可以免费使用10G的空间,决定先试试. 项目中使用的是Kindeditor作为网页编辑器的,七牛云的插件里没有现成的Kindeditor的插 ...
- Ueditor上传图片到本地改造到上传图片到七牛云存储
作为新手说多了都是泪啊!我特别想记录一下作为菜鸟时的坑.看看以后是否会看着笑出来. 为什么要改到云存储上就不说了.好处多多. 视频教程上使用的又拍云同时也提到了七牛云.下来我自己也查了下.又拍云是试用 ...
- JavaWeb结合七牛云存储搭建个人相册服务
JavaWeb结合七牛云存储搭建个人相册服务 一.引言1. 课程概述 相信很多人都知道网站一般会有很多图片,对于小型网站来说,图片放在网站服务器上不算什么,但当图片数量很大时,会造成服务器很臃肿,相应 ...
- 【UEditor】远程上传图片到【七牛云存储】
杂谈:最近在玩一个第三方的微信开发平台,里面的图片都是上传到[七牛云存储]的,用了一下非常的好用,支持各种语言,SDK齐全.支持全分布式系统架构以及存储技术和数据加速,于是决定将网站的图片都存储到七牛 ...
- 上传图片到七牛云（服务端 node.js sdk）
大体思路 前端要上传图片到七牛云,需要有一个token进行授权操作,而获取这个上传的upload token(以下简称upToken),在服务端需要一定的身份校验,比如说:只有登录的vip用户才能拿到 ...
- wordpress使用video.js与七牛云存储实现无广告视频分享应用
video.js是一款极受欢迎的基于HTML5的开源WEB视频播放器,其充分利用了HTML5的视频支持特性,可以实现全平台的无视频插件播放功能,对于现在流行的手机.PAD等移动智能终端有极佳的应用体验 ...
- C#/.net七牛云存储上传图片(文件)操作
七牛云存储官方: C#SDK(http://developer.qiniu.com/docs/v6/sdk/csharp-sdk.html) 注册成为标准用户就可获得:10GB永久免费存储空间/ 每月 ...
- 用ueditor上传图片、文件等到七牛云存储
ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll, ...
随机推荐
- thinkphp5 redis使用
参数参考位置:thinkphp\library\think\cache\driver class Redis extends Driver { protected $options = [ 'host ...
- Oracle 表空间、用户
一.表空间 临时表空间 创建临时表空间范例 CREATE TEMPORARY TABLESPACE duke_temp /* 临时表空间名称:duke_temp */ tempfile 'C:\ora ...
- JS 時間戳轉日期格式
1.日期轉換為時間戳,(如果日期格式為時間戳,將其轉為日期類型,否則輸出傳入的數據) // 如果時間格式為時間戳,將其轉為日期 function timestampToDate(timestamp) ...
- 使用Gradle打出带签名的apk包
step1:配置build.gradle文件 step1:切换到项目所在目录,用build命令打包 首先 gradle clean 命令清理一下当前项目 E:\AndroidStudioProject ...
- 使用命令将ipa包上传到蒲公英
参考:官文文档 请根据开发者自己的账号,将其中的 uKey 和 _api_key 的值替换为相应的值. curl -F "file=@/Users/chenpeisong/Desktop ...
- Python笔记(七)_全局变量与局部变量
全局变量与局部变量:在函数外部或内部定义的变量 1. 函数内部的变量名首次出现,且在=号左边 不管这个变量在全局域中有没有定义该变量名,都被视为一个局部变量 例1: >>>num=1 ...
- day 107radis非关系型数据库
http://www.cnblogs.com/wupeiqi/articles/5132791.html 参考邮件. radis : 1. NoSql 2. 缓存在内存中 3.支持数据持久化 二. ...
- bat 需注意
1. 注释 :: 注释内容,下一行不能是空行,必须是语句否则报错. goto blabla rem 注释内容,则无上述限制. goto blabla 2. if rem 1. 要注意左括号前的空格以及 ...
- Django token 学前小知识
1,base64 '防君子不防小人' 方法 作用 参数 返回值 b64encode 将输入的参数转化为base64规则的串 预加密的明文,类型为bytes:例:b‘guoxiaonao’ base64 ...
- Python 学习笔记14 类 - 使用类和实例
当我们熟悉和掌握了怎么样创建类和实例以后,我们编程中的大多数工作都讲关注在类的简历和实例对象使用,修改和维护上. 结合实例我们来进一步的学习类和实例的使用: 我们新建一个汽车的类: #-*- codi ...