关于兼容性问题,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文件上传及一些问题的更多相关文章

  1. SpringBoot整合阿里云OSS文件上传、下载、查看、删除

    1. 开发前准备 1.1 前置知识 java基础以及SpringBoot简单基础知识即可. 1.2 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 所用技术:SpringBoot.lom ...

  2. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  3. 构建基于阿里云OSS文件上传服务

    转载请注明来源:http://blog.csdn.net/loongshawn/article/details/50710132 <构建基于阿里云OSS文件上传服务> <构建基于OS ...

  4. OSS文件上传及OSS与ODPS之间数据连通

    场景描述        有这样一种场景,用户在自建服务器上存有一定数量级的CSV格式业务数据,某一天用户了解到阿里云的OSS服务存储性价比高(嘿嘿,颜值高),于是想将CSV数据迁移到云上OSS中,并且 ...

  5. js插件---IUpload文件上传插件(包括图片)

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  6. PHP实现阿里云OSS文件上传(支持批量)

    上传文件至阿里云OSS,整体逻辑是,文件先临时上传到本地,然后在上传到OSS,最后删除本地的临时文件(也可以不删,具体看自己的业务需求),具体实现流程如下:   1.下载阿里云OSS对象上传SDK(P ...

  7. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  8. 记一次阿里云oss文件上传服务假死

    引言 记得以前刚开始学习web项目的时候,经常涉及到需要上传图片啥的,那时候都是把图片上传到当前项目文件夹下面,每次项目一重启图片就丢了.虽然可以通过修改/tomcat/conf/server.xml ...

  9. php阿里云oss文件上传

    php的文件上传 文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档 单文 ...

随机推荐

  1. 贝叶斯---最大似然估计(高翔slam---第六讲 )

    1.贝叶斯---最大似然估计 回顾一下第二讲的经典SLAM模型: 通过传感器(例如IMU)的运动参数u来估计运动(位姿x)[定位],通过相机的照片的观测参数z来估计物体的位置(地图y)[建图],都是有 ...

  2. Solidity的地址 数组如何判断是否包含一个给定的地址?

    Q: given address[] wallets. What is the correct method to check that the list contains a given addre ...

  3. Vue 的生命周期图

  4. maven插件后报错:org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project

    在给eclipse换了高版本的maven插件后,引入jar包报如下的错误: org.apache.maven.archiver.MavenArchiver.getManifest(org.apache ...

  5. 安卓ViewStub用法

    安卓ViewStub用法 在开发应用程序的时候,经常会遇到这样的情况,在运行时动态根据条件来决定显示哪个View或某个布局. 那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为 ...

  6. linux ">/dev/null 2>&1 &"

    0:表示键盘输入(stdin)1:表示标准输出(stdout),系统默认是1 2:表示错误输出(stderr) command >/dev/null 2>&1 &  == ...

  7. 代码之髓读后感——语法&流程&函数&错误处理

    title: 代码之髓读后感2.md date: 2017-07-08 17:33:11 categories: tags: Perl的设计者:Larry Wall在<Programming P ...

  8. 设计模式学习心得<工厂方法 Factory Method>

    概述 意图 业务代码中常常有构造对象的过程,它拥有大量的参数.并且有很多地方需要这对象. 简化对象构造过程. 主要解决 一个类在不同场景的频繁地创建,让不同对象的创建更有语义化,提高代码复用性. 何时 ...

  9. windows powershell

    今天用了一条命令: dism /online /add-package /packagepath:c:xxxx.cab

  10. java 大任务分解成小任务 fork/join

    https://blog.csdn.net/weixin_41404773/article/details/80733324目标求 0+1+2+3+4+5+....+1000 初始 start=0 , ...