关于兼容性问题，ie8以下的可以使用4.x的版本

一、引入sdk和jq

  1. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  2. <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

二、基本配置

  1. var client =new OSS.Wrapper({
  2.     region:'',
  3.     accessKeyId:'‘,
  4.     accessKeySecret:'',
  5.     bucket:''
  6. })

region：阿里云服务器地址

accessKeyId：您的key

accessKeySecret：您的密码，

bucket：你要上传到那个文件夹下； 这个需要在阿里云服务器建立

三、获取文件列表

  1. client.list({
  2.             'max-keys':10
  3.  }).then(function(res) {
  4.          console.log(res)
  5.  }).catch(function(err){
  6.          console.log(err)
  7. })

这个时候一般会出现跨越问题，解决办法是：

1.选择你自己新建的Bucket文件

2.找到tab栏中的基础设置

3.设置跨越

当上传的文件超过100k时会报错，解决方法是在下图中暴露Headers选项中加入：

etag
x-oss-request-id
x-oss-meta-test

这三个值即可。

四、完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>js oss文件上传测试</title>
  8.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  9.     <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
  10. </head>
  11. <body>
  12.     <input type="file" name="" id="file" value=""/>
  13.     <script type="text/javascript">
  14.         var client =new OSS.Wrapper({
  15.             region:'',
  16.             accessKeyId:'',
  17.             accessKeySecret:'',
  18.             bucket:''
  19.         })
  20.  
  21.         //获取oss文件列表
  22.         client.list({
  23.             'max-keys':10
  24.         }).then(function(res) {
  25.             console.log(res)
  26.         }).catch(function(err){
  27.             console.log(err)
  28.         })
  29.  
  30.         $("#file").change(function () {
  31.             client.multipartUpload(this.files[0].name, this.files[0]).then(function (result) {
  32.                 console.log(result);
  33.             }).catch(function (err) {
  34.                 console.log(err);
  35.             });
  36.         });
  37.     </script>
  38. </body>
  39. </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. 通过DOS界面查看电脑上端口使用情况

    如何查看查看端口是否被占用? 打开电脑上的运行,输入cmd,进入DOS界面. 然后输入       netstat -an     即可显示电脑上所用的端口使用情况! 状态显示 LISTENING就表 ...

  2. dfs | Security Badges

    Description You are in charge of the security for a large building, with n rooms and m doors between ...

  3. 时间戳转中国人能看得懂的日期格式 yy-mm-dd

    很多项目都会用到时间戳的转换 说实话  我现在的这家公司超级好 因为后太要求传数据的时候竟然可以是时间戳的格式 我觉得我好幸福 哈哈哈 不过 等后台转给你数据的时候很多时候都是时间戳 这时候就得前端转 ...

  4. Hadoop 系列（三）Java API

    Hadoop 系列(三)Java API <dependency> <groupId>org.apache.hadoop</groupId> <artifac ...

  5. SpringMvc在返回数据之前进行统一处理

    这里其实有多种解决方案 如果你不需要获取request对象 可以采用aop(环绕通知)的方式来统一修改 如果你需要获取request对象,那么就需要采用下面的方式 0自己定义一个注解,内容如下 @Ta ...

  6. python入门之两种方法修改文件内容

    1.占硬盘修改 import os file_name="兼职.txt" new_file_name="%s.new".% file_name old_str= ...

  7. 引用数据类型 Scanner和 Random

    键盘录入Scanner 获取键盘录入的数据,对获取数据的具体操作进行了封装,只需要调用方法,即可得到键盘录入的数据 A:导包            import java.util.Scanner;  ...

  8. Beta冲刺 （5/7）

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 共享编辑文章的后端数据处理 部分代码 ...

  9. hive 语法 case when 语法

    ' then '精选' else null end as sale_type 注意: end不能少

  10. Linux基础理论

    本节内容 1.  Linux的安装及相关配置 2.  UNIX和Linux操作系统概述 3.  Linux命令及帮助 4.  目录结构 6.  用户.群组和权限 7.  用户.群组和权限的深入讨论 1 ...