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, ...
随机推荐
- error C2664: “ATL::CStringT<BaseType,StringTraits>::Remove”: 不能将参数 1 从“const char [2]”转换为“char”
转自VC错误:http://www.vcerror.com/?p=1395 问题描述: 代码: CString str("asdfafda"); str.Remove(" ...
- SQL语言基础-基本概念
SQL:IBM的圣约瑟(SanJose),SEQUEL 2(也就是现在的SQL语言) 1979.Oracle首先提出提供了商用的SQL语言 1986.10美国ANSI采用SQL作为关系数据库管理系统的 ...
- QTP中类的使用（转）
Call Test Class Tester Dim mvarTesterName,mvarAge,mvarGender Sub Class_Initia ...
- 重定向和转向的写法，重定向以post方式提交
重转向保留跳转过来的Referer,路径不会变1 request.getRequestDispatcher("/eventweb/index.sp?loginId=" + logi ...
- box-shadow 制作单边阴影效果,不影响其它边的效果
box-shadow 制作单边阴影效果,不影响其它边的效果: https://blog.csdn.net/u010289111/article/details/53171128 CSS 样式实现单边 ...
- redis集群搭建（简单简单）一台机器多redis
redis集群搭建 在开始redis集群搭建之前,我们先简单回顾一下redis单机版的搭建过程 下载redis压缩包,然后解压压缩文件: 进入到解压缩后的redis文件目录(此时可以看到Makef ...
- Centos,tomcat
1.下载tomcat9.0,解压,配置 wget https://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-9/v9.0.21/bin/apa ...
- flask开发问题小记
前因 最近在使用flask开发一个APP的后端时出现了一些小问题.我使用sqlalchemy建立了如下多对多关系: 中间表 user_manager_group = db.Table('manage_ ...
- Spring Bean 的加载过程
Spring Bean 的加载过程 一个是populateBean,一个是initializeBean,这两个方法完成了bean的赋值与初始化. 这里有一个BeanDefinitionValueRes ...
- vue-router中的router-link的active-class
vue-router中的router-link的active-class 在vue-router中要使用选中样式的方法有两种: 1.直接在路由js文件中配置linkActiveClass 2.在r ...