oss web直传
签名信息
auth.php
<?php
function gmt_iso8601($time) {
$dtStr = date("c", $time);
$mydatetime = new DateTime($dtStr);
$expiration = $mydatetime->format(DateTime::ISO8601);
$pos = strpos($expiration, '+');
$expiration = substr($expiration, 0, $pos);
return $expiration."Z";
}
//阿里云官方提供的秘钥
$id= '6MKOqxGiGU4AUk44';
$key= 'ufu7nS8kS59awNihtjSonMETLI0KLy';
$host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com'; $now = time();
$expire = 30; //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问
$end = $now + $expire;
$expiration = gmt_iso8601($end); $dir = 'user-dir/'; //最大文件大小.用户可以自己设置
$condition = array(0=>'content-length-range', 1=>0, 2=>1048576000);
$conditions[] = $condition; //表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录
$start = array(0=>'starts-with', 1=>'$key', 2=>$dir);
$conditions[] = $start; $arr = array('expiration'=>$expiration,'conditions'=>$conditions); $policy = json_encode($arr);
$base64_policy = base64_encode($policy);
$string_to_sign = $base64_policy;
$signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true)); $response = array();
$response['accessid'] = $id;
$response['host'] = $host;
$response['policy'] = $base64_policy;
$response['signature'] = $signature;
$response['expire'] = $end;
//这个参数是设置用户上传指定的前缀
$response['dir'] = $dir; $response['code']=1; echo json_encode(['data'=>$response,'status'=>1]);
web端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body> <div>
<input type="hidden" > <img src="" style="width: 200px;height: 100px; display: none">
<input type="file" name="upfile" accept="image/*" >
</div> <script type="text/javascript">
var expire =0;
sign_obj='';
var serverUrl='auth.php';
$(function () {
$("div").on("change",'input[type="file"]',function(evt){
$this=$(this);
var files = evt.target.files;
var file=files[0];
if(file.size > 10*1024*1024 ){
alert('too big');
return false;
}
get_signature();
if(sign_obj == '') {
alert(sign_obj);
alert('签名error,请重试');
return false;
} var g_object_name=sign_obj.dir+random_string()+get_suffix(file.name);
var request = new FormData();
request.append("OSSAccessKeyId",sign_obj.accessid);//Bucket 拥有者的Access Key Id。
request.append("policy",sign_obj.policy);//policy规定了请求的表单域的合法性
request.append("Signature",sign_obj.signature);//根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
request.append("key",g_object_name);//文件名字，可设置路径
request.append("success_action_status",'200');// 让服务端返回200,不然，默认会返回204
request.append('x-oss-object-acl', 'public-read');
request.append('file', file);
$.ajax({
url : sign_obj.host, //上传阿里地址
data : request,
processData: false,//默认true，设置为 false，不需要进行序列化处理
cache: false,//设置为false将不会从浏览器缓存中加载请求信息
async: false,//发送同步请求
contentType: false,//避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
dataType: 'xml',//不涉及跨域 写json即可
type : 'post',
success : function(callbackHost, request) { //callbackHost：success,request中就是 回调的一些信息，包括状态码什么的
var origin=sign_obj.host+'/'+g_object_name;
var src=origin;
$this.closest('div').find('img').attr('src', src).show();
$this.closest('div').find('.imgclose').show();
},
error : function(returndata) {
console.log("return data:"+returndata);
alert('上传图片出错啦,请重试')
}
});
});
}) function random_string(len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
} function get_suffix(filename) {
var pos = filename.lastIndexOf('.')
var suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
//获取签名信息
function send_request()
{
var xmlhttp = null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.open( "GET", serverUrl, false );
xmlhttp.send( null );
return xmlhttp.responseText
}
else
{
alert("Your browser does not support XMLHTTP.");
}
} function get_signature()
{
//可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
now = timestamp = Date.parse(new Date()) / 1000;
if (expire < now + 3)
{
var body = send_request();
var obj =JSON.parse(body);
if(obj.status ==1 && obj.data.code == 1){
sign_obj= obj.data;
expire= parseInt(sign_obj['expire']);
return true;
} return true;
}
return false;
}; </script> </body>
</html>
oss web直传的更多相关文章
- OSS web直传 ajax方式 上传图片、文件
部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...
- 阿里云 oss 图片上传解决方案 vue （web直传）
我们通过aliyun-oss-web这个npm去解决 该文章主要介绍如何获取 imgSignature 和 imgPolicy 这两个参数 首先下载 web直传的案例 : http://files.c ...
- 阿里云OSS Web端直传 服务器签名C#版
最近用到队里OSS的文件上传,然后阿里官方给的四个服务器签名有Java PHP Python Go四个版本,就是没C#(话说写个C#有多难?) 百度了一下好像也没有,既然这样只能自己动手照着Java版 ...
- 用阿里官网提供的plupload oss的web直传，视频上传进行前端验证它的时长，尺寸，大小等。替换上一个不需要的单个视频
accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = ...
- 阿里OSS ajax方式 web直传
部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...
- 阿里云利用web直传文件到oss服务器
http://files.cnblogs.com/files/adtuu/oss-h5-upload-js-direct.tar.gz
- 阿里OSS前端直传
第一次写博客,如有错误请多多指教. 先上代码吧: ossUpload = function (file, fun, funParameter) { //第一此请求后台服务器获取认证请求 $.ajax( ...
- php阿里云oss文件上传
php的文件上传 文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档 单文 ...
- 微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
随机推荐
- api-gateway实践（06）新服务网关 - 请求监控
一.实时监控 用户点击服务实例,系统显示服务实例-version下的api列表, 用户点击某个api的如下两个图标 1.API请求次数监控 横轴:时间,粒度为分钟 纵轴:请求访问次数 展示:失败数(红 ...
- IDE-Android Studio 导入Ecplise项目不改变结构
Android Studio 导入 Ecplise创建的android 项目 无导入 不修改目录结构 首先,Ecplise 原有目录结构创建的android项目一枚 Sept 1 . 打开项目 S ...
- CentOS7配置php7.0支持redis
配置之前应该是环境已经搭好了,phpinfo的页面可以加载出来. 使用git clone下载git上的phpredis扩展包 [root@VM_103_117_centos ]#git clone ...
- linux系统下的SVN安装
1.直接安装 # sudo apt-get install subversion 2. 创建版本库 # sudo mkdir /home/svn # sudo svnadmin create /hom ...
- 道可道，非常道——详解promise
promise 出来已久,以前一直使用,没有仔细剖析原理,最近在复习es6的知识,写一下自己对于promise的理解. promise是es6的一种异步编程解决方案,避免频繁的回调函数,增强代码的可阅 ...
- packer的基本使用
工具的产生,一定是为了解决某些痛点,那么痛点是? 你们在工作中是不是经常用到各种云?aliyun, aws, digitalOcean and so on? 你们的规模不大不小,经常去云平台上点一点, ...
- 消息中间件选型分析——从Kafka与RabbitMQ的对比来看全局
一.前言 消息队列中间件(简称消息中间件)是指利用高效可靠的消息传递机制进行与平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环境下提供应用解耦 ...
- AFNetworking 源码解读
最近开始看第三方库优秀源码的计划,这是第一个,AFNetworking来和大家分享一下. AFNetworking 是一个十分优秀的网络框架,简单易用. 在开始之前,最好先了解一下NSURLSessi ...
- Linux（一）VMware虚拟机的安装
vmware的安装文件: 链接:https://pan.baidu.com/s/1QGjNqRZzE-vV7Af0PI2QYA 密码:omfe 1.1 首先下载安装包 安装包的内容 1.2 双击exe ...
- 开源协议瞎扯淡，什么是 MIT 协议？[转]
图片来源:http://ruby-china.org/topics/15979