js实现oss文件上传及一些问题
关于兼容性问题，ie8以下的可以使用4.x的版本
一、引入sdk和jq
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
二、基本配置
var client =new OSS.Wrapper({
region:'',
accessKeyId:'‘,
accessKeySecret:'',
bucket:''
})
region：阿里云服务器地址
accessKeyId：您的key
accessKeySecret：您的密码，
bucket：你要上传到那个文件夹下； 这个需要在阿里云服务器建立
三、获取文件列表
client.list({
'max-keys':10
}).then(function(res) {
console.log(res)
}).catch(function(err){
console.log(err)
})
这个时候一般会出现跨越问题，解决办法是：
1.选择你自己新建的Bucket文件
2.找到tab栏中的基础设置
3.设置跨越
当上传的文件超过100k时会报错，解决方法是在下图中暴露Headers选项中加入：
etag
x-oss-request-id
x-oss-meta-test
这三个值即可。
四、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js oss文件上传测试</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
</head>
<body>
<input type="file" name="" id="file" value=""/>
<script type="text/javascript">
var client =new OSS.Wrapper({
region:'',
accessKeyId:'',
accessKeySecret:'',
bucket:''
}) //获取oss文件列表
client.list({
'max-keys':10
}).then(function(res) {
console.log(res)
}).catch(function(err){
console.log(err)
}) $("#file").change(function () {
client.multipartUpload(this.files[0].name, this.files[0]).then(function (result) {
console.log(result);
}).catch(function (err) {
console.log(err);
});
});
</script>
</body>
</html>
参考地址：
https://www.cnblogs.com/ossteam/p/4942227.html
https://blog.csdn.net/dc2222333/article/details/79409513
https://www.cnblogs.com/MainActivity/p/8492211.html
js实现oss文件上传及一些问题的更多相关文章
- SpringBoot整合阿里云OSS文件上传、下载、查看、删除
1. 开发前准备 1.1 前置知识 java基础以及SpringBoot简单基础知识即可. 1.2 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 所用技术:SpringBoot.lom ...
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...
- 构建基于阿里云OSS文件上传服务
转载请注明来源:http://blog.csdn.net/loongshawn/article/details/50710132 <构建基于阿里云OSS文件上传服务> <构建基于OS ...
- OSS文件上传及OSS与ODPS之间数据连通
场景描述 有这样一种场景,用户在自建服务器上存有一定数量级的CSV格式业务数据,某一天用户了解到阿里云的OSS服务存储性价比高(嘿嘿,颜值高),于是想将CSV数据迁移到云上OSS中,并且 ...
- js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- PHP实现阿里云OSS文件上传(支持批量)
上传文件至阿里云OSS,整体逻辑是,文件先临时上传到本地,然后在上传到OSS,最后删除本地的临时文件(也可以不删,具体看自己的业务需求),具体实现流程如下: 1.下载阿里云OSS对象上传SDK(P ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 记一次阿里云oss文件上传服务假死
引言 记得以前刚开始学习web项目的时候,经常涉及到需要上传图片啥的,那时候都是把图片上传到当前项目文件夹下面,每次项目一重启图片就丢了.虽然可以通过修改/tomcat/conf/server.xml ...
- php阿里云oss文件上传
php的文件上传 文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档 单文 ...
随机推荐
- LAB2
任务1: 效果:HelloWorld 好像完全按视频做就行了 学会了:把glassfish改好了,能跑 没学会:视频里的解说不懂在干嘛,得再看看 任务2 效果:intersetingpicture要求 ...
- Math的方法；Date的方法；
Math的方法: (1)弧度的π Math.PI() (2)返回平方根 Math.sqrt() (3)返回x的绝对值 Mathabs(x) (4)返回x的上舍入 Math.ceil(x) (5)返回 ...
- VS2015 提示 无法启动 IIS Express Web 服务器
好久没有写东西了,不是没的写,是没时间了,今天快下班了,正好遇到这个一个问题,我就记录下来,以防忘记. 我定义了一个项目,Demo代码也写好了,然后,我们就把写好的项目代码加入到了源代码管理工具里.然 ...
- Java代码获取spring 容器的bean几种方式
一.目的 写了一个项目,多个module,然后想在A模块中实现固定的config注入,当B模块引用A时候,能够直接填写相对应的配置信息就行了.但是遇到一个问题,B引用A时候,A的配置信息总是填充不了, ...
- 我的java学习之旅--一些基础
(因为我粗略学过C,C++,Python,了解过他们的一些语法,所以为了使得java的入门更为顺畅,便会忽略一些和C语法相类似的地方,着重点明一些java自己的特色之处.也减轻一下自己写文字的负担.) ...
- MongoDB 官网教程 下载 安装
官网:https://www.mongodb.com/ Doc:https://docs.mongodb.com/ Manual:https://docs.mongodb.com/manual/ 安装 ...
- 分布式协议学习笔记(一) Raft 选举
Raft官网 官方可视化动画1 官方可视化动画2 论文中文翻译 论文英文地址 感觉作为paxos的升级精简版 Raft在设计之初就以容易理解为目标 看完资料 脑海里都有了大概的轮廓. 有了这些详细的资 ...
- Delphi 域名解析为IP地址
花生壳:1.LJSZForm-Lable1-Caption改成 “IP地址或域名:”2.LJSZForm-BitBtn1Click-注释掉--else if IsIP(Trim(IPEdit.Text ...
- web版ssh的使用
一.web_ssh版本安装使用 web_ssh源码:https://github.com/shellinabox/shellinabox 1)安装依赖包 yum install git openssl ...
- FastJSON基础
对象的类型 json文本 json数组 json对象 java对象 类型的转换 json文本 转 json对象 JSON.parseObject(str) json文本 ...