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)的 ...

随机推荐

FPGA与MATLAB数据交互高效率验证算法——仿真阶段
之前博文是对基本设计技巧的总结和一些小设计随笔,内容有点杂,缺乏目的性.本来后续计划设计几个小项目,但导师的任务比较紧,所以为了提高效率,后续博客会涉及到很多算法方面的设计与验证的内容,主要关于OFD ...
Django--ORM基本操作
一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 pr ...
PHP多个一维数组合并成二维数组的简易方法
当我们需要进行数组遍历数据的时候,需要将多个一维数组进行二维的转换,方法很简单.如下: <?php $a= array('张三','李四','王五'); $b= array ('23','24' ...
ProxySQL 读写分离实践
前言 ProxySQL是一个高性能的MySQL中间件,拥有强大的规则引擎.具有以下特性: 连接池,而且是 multiplexing 主机和用户的最大连接数限制自动下线后端DB 延迟超过阀值 ping ...
使用REST风格完成MVC前后端分离
一个具有REST风格项目的基本特征: 具有统一响应结构前后台数据流转机制(HTTP消息与Java对象的互相转化机制) 统一的异常处理机制参数验证机制 Cors跨域请求机制鉴权机制一:统一响应结 ...
列表(list)之二 -运用篇 -快速生成规律性列表
生成列表[1*2,3*4,5*6,7*8,9*10,11*12] 方法一:list1=[]for i in range(1,13,2): list1.append(i*(i+1))print(list ...
iframe 里的高度适应的问题
iframe 这个东西功能是很强大,但是有一个巨大的问题就是高度自适应的问题: 不过这个问题,百度或者谷歌上有很多解决办法,但是,很多时候都有兼容性问题: 所有我就每个方法都试了一遍,终于找到了一个 ...
Java多线程之interrupt()的深度研究
近期学习Java多线程的中断机制,网上的帖子说得很浅,并没深究其原理.看了Java源码,对Java的中断机制有了略深入的理解,在这篇文章中向感兴趣的网友分享下.这篇文章主要通过一个典型例子对中断机制进 ...
STM32 - GPIO
买了一个STM32F4的开发板,想把上面的东西重新学一下快速过: 一.GPIO控制 void GPIO_DeInit(GPIO_TypeDef* GPIOx); //把某一个IO口恢复到默认值 /* ...
Topcoder口胡记 SRM 562 Div 1 ~ SRM 599 Div 1
据说做TC题有助于提高知识水平? :) 传送门:https://284914869.github.io/AEoj/index.html 转载请注明链接:http://www.cnblogs.com/B ...

oss web直传

oss web直传的更多相关文章

随机推荐

热门专题