签名信息

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直传的更多相关文章

  1. OSS web直传 ajax方式 上传图片、文件

    部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...

  2. 阿里云 oss 图片上传解决方案 vue （web直传）

    我们通过aliyun-oss-web这个npm去解决 该文章主要介绍如何获取 imgSignature 和 imgPolicy 这两个参数 首先下载 web直传的案例 : http://files.c ...

  3. 阿里云OSS Web端直传 服务器签名C#版

    最近用到队里OSS的文件上传,然后阿里官方给的四个服务器签名有Java PHP Python Go四个版本,就是没C#(话说写个C#有多难?) 百度了一下好像也没有,既然这样只能自己动手照着Java版 ...

  4. 用阿里官网提供的plupload oss的web直传，视频上传进行前端验证它的时长，尺寸，大小等。替换上一个不需要的单个视频

    accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = ...

  5. 阿里OSS ajax方式 web直传

    部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...

  6. 阿里云利用web直传文件到oss服务器

    http://files.cnblogs.com/files/adtuu/oss-h5-upload-js-direct.tar.gz

  7. 阿里OSS前端直传

    第一次写博客,如有错误请多多指教. 先上代码吧: ossUpload = function (file, fun, funParameter) { //第一此请求后台服务器获取认证请求 $.ajax( ...

  8. php阿里云oss文件上传

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

  9. 微信小程序环境下将文件上传到 OSS

    步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...

随机推荐

  1. Let's Encrypt，免费好用的 HTTPS 证书

    很早之前我就在关注 Let's Encrypt 这个免费.自动化.开放的证书签发服务.它由 ISRG(Internet Security Research Group,互联网安全研究小组)提供服务,而 ...

  2. jsp和servlet的区别和联系

    jsp和servlet的区别和联系:1.jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识别JSP的代码,Web容器将JSP的代码编译成JVM能 ...

  3. 量化框架zipline--分钟回测改写

    转自:http://www.cnblogs.com/dxf813/p/7845398.html 基于zipline的分钟回测改写,其中数据源为自定义,使用bcolz的ctable,该数据格式与pand ...

  4. uva 10917 Walk Through The Forest

    题意: 一个人从公司回家,他可以从A走到B如果从存在从B出发到家的一条路径的长度小于任何一条从A出发到家的路径的长度. 问这样的路径有多少条. 思路: 题意并不好理解,存在从B出发到家的一条路径的长度 ...

  5. 01、NetCore2.0优化之Web服务器 与 IIS解耦

    01.NetCore2.0优化之Web服务器 与 IIS解耦 在Asp.Net Core 2.0中,是如何实现跨平台的?不使用IIS了,在linux上的WebServer是什么? ---------- ...

  6. 【面试题】由HashMap引发的一系列追问

    HashMap和HashTable的区别 同:HashMap和Hashtable都实现了Map接口. 异:HashMap允许null的键值对,非同步的,非线程安全的,效率高: HashTable不允许 ...

  7. javascript的变量声明、数据类型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Spring(4)——面向切面编程（AOP模块）

    Spring AOP 简介 如果说 IoC 是 Spring 的核心,那么面向切面编程就是 Spring 最为重要的功能之一了,在数据库事务中切面编程被广泛使用. AOP 即 Aspect Orien ...

  9. JavaScript 散集合（HashArray）

    散列表和散列映射是一样的,我们已经在本章中介绍了这种数据结构. 在一些编程语言中,还有一种叫作散列集合的实现.散列集合由一个集合构成,但是插入. 移除或获取元素时,使用的是散列函数.我们可以重用本章中 ...

  10. [LeetCode] Range Module 范围模块

    A Range Module is a module that tracks ranges of numbers. Your task is to design and implement the f ...