利用阿里云OSS开发一个私人网盘/外链系统，php+js实现

摘要：什么是阿里云简单地理解，阿里云以下简称就是一个储存空间比较大的硬盘。一般储存空间在范围内根据自己的需要去购买，而且便宜在阿里云官网可以购买。你完全可以把这个当成私人网盘来用。我这里就利用官方的来制作一个简单的文件上传系统，非常简单的网盘。

什么是阿里云OSS？
简单地理解，阿里云OSS(以下简称OSS)就是一个储存空间比较大的硬盘。
一般储存空间在40GB-400TB范围内
根据自己的需要去购买，而且便宜！

在阿里云官网可以购买。
我自己做学习，测试，就买了个40GB的，刚好搞活动0.9元2年有效期！
就算不搞活动，大家也买得起，40GB，5元6个月，10元1年。少抽一包烟就可以买了...
像一些比较小的网站，40GB真的够用了。
视频，音乐网站就需要比较大的储存空间。

OSS到底用来干嘛的？
OK，再简单地说，就是你的网站日常更新需要存放的一些文件（图片、视频、文档、音频、安装包）等
，这些文件，你总不能放在服务器或者虚拟主机里面吧？
虚拟主机或者服务器的空间可是有限的，小则100MB，大则也就10GB-50GB这样

所以，如果你的网站经常更新，或者平常发布的内容包含的文件非常多并且很占空间
那就不适合用虚拟主机来存放文件了，而且虚拟主机的加载速度有限
OSS的加载速度比虚拟主机好。特别是视频网站和音乐网站，你把视频文件或者音乐上传到
虚拟主机，时间久了，你的虚拟主机就没什么空间了，而OSS空间大，可以用很久，放很多东西。
重要的是，虚拟主机的价钱比OSS高很多。

简单来说，OSS是适合用来储存网站的文件的（图片、视频、文档、音频、安装包等），相当于一个网盘了。而虚拟主机虽然也可以储存文件，但是限制太多了，虚拟主机更适合用来运行代码，存放程序文件。

OSS则没有运行代码的环境和能力。

以上说了这么多了，相信第一次接触OSS的人应该明白了。
所以这次，我将给大家分享一下OSS的使用：
1、先开通OSS，并购买储存包。
https://www.aliyun.com/produc...

2、然后进入OSS控制台，新建bucket

接着获取Access Key ID和Access Key Secret

我们点进去我们建立好的bucket

就可以对你的OSS进行管理了，比如绑定域名，OSS申请好了一般会给你分配一个域名，但是那个不是你自己的域名，如果你想要绑定自己的域名，就进去域名绑定绑定即可。

还有文件管理，可以把你想要上传的文件上传到OSS，上传成功后，点击文件名，就可以看到这个文件的信息。

还可以获得这个文件的地址，那么这个就是简单的外链系统了，通过OSS把文件上传到这里，获得外链，就这么简单。
你完全可以把这个OSS当成私人网盘来用。

还有一些其他的设置可以自己去琢磨，OSS还提供了SDK供大家开发，接入自己的网站项目，实现云储存，把网站的所有文件资源都储存到OSS里面。

我这里就利用官方的DEMO来制作一个简单的文件上传系统，非常简单的网盘。
下面是截图：

代码：
index.html

    
    
    
    



里客云OSS上传

 上传后保持原文件名

 上传后生成随机文件名


请选择文件上传：
你的浏览器不支持flash,Silverlight或者HTML5！

    选择文件
    开始上传




 

get.php

format(DateTime::ISO8601);
        $pos = strpos($expiration, "+");
        $expiration = substr($expiration, 0, $pos);
        return $expiration."Z";
    }

    $id= "填写你的Access Key ID";
    $key= "填写你的Access Key Secret";
    $host = "填写你的EndPoint";

    $now = time();
    $expire = 30; //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问
    $end = $now + $expire;
    $expiration = gmt_iso8601($end);

    $dir = "file_url/";

    //最大文件大小.用户可以自己设置
    $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);
    //echo json_encode($arr);
    //return;
    $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;
    echo json_encode($response);
?>

其中你的EndPoint就是控制台里面的bucket的域名

upload.js

accessid = ""
accesskey = ""
host = ""
policyBase64 = ""
signature = ""
callbackbody = ""
filename = ""
key = ""
expire = 0
g_object_name = ""
g_object_name_type = ""
now = timestamp = Date.parse(new Date()) / 1000; 

function send_request()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  
    if (xmlhttp!=null)
    {
        serverUrl = "get.php"
        xmlhttp.open( "GET", serverUrl, false );
        xmlhttp.send( null );
        return xmlhttp.responseText
    }
    else
    {
        alert("Your browser does not support XMLHTTP.");
    }
};

function check_object_radio() {
    var tt = document.getElementsByName("myradio");
    for (var i = 0; i < tt.length ; i++ )
    {
        if(tt[i].checked)
        {
            g_object_name_type = tt[i].value;
            break;
        }
    }
}

function get_signature()
{
    //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
    now = timestamp = Date.parse(new Date()) / 1000; 
    if (expire < now + 3)
    {
        body = send_request()
        var obj = eval ("(" + body + ")");
        host = obj["host"]
        policyBase64 = obj["policy"]
        accessid = obj["accessid"]
        signature = obj["signature"]
        expire = parseInt(obj["expire"])
        callbackbody = obj["callback"] 
        key = obj["dir"]
        return true;
    }
    return false;
};

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) {
    pos = filename.lastIndexOf(".")
    suffix = ""
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
}

function calculate_object_name(filename)
{
    if (g_object_name_type == "local_name")
    {
        g_object_name += "${filename}"
    }
    else if (g_object_name_type == "random_name")
    {
        suffix = get_suffix(filename)
        g_object_name = key + random_string(10) + suffix
    }
    return ""
}

function get_uploaded_object_name(filename)
{
    if (g_object_name_type == "local_name")
    {
        tmp_name = g_object_name
        tmp_name = tmp_name.replace("${filename}", filename);
        return tmp_name
    }
    else if(g_object_name_type == "random_name")
    {
        return g_object_name
    }
}

function set_upload_param(up, filename, ret)
{
    if (ret == false)
    {
        ret = get_signature()
    }
    g_object_name = key;
    if (filename != "") {
        suffix = get_suffix(filename)
        calculate_object_name(filename)
    }
    new_multipart_params = {
        "key" : g_object_name,
        "policy": policyBase64,
        "OSSAccessKeyId": accessid, 
        "success_action_status" : "200", //让服务端返回200,不然，默认会返回204
        "callback" : callbackbody,
        "signature": signature,
    };

    up.setOption({
        "url": host,
        "multipart_params": new_multipart_params
    });

    up.start();
}

var uploader = new plupload.Uploader({
    runtimes : "html5,flash,silverlight,html4",
    browse_button : "selectfiles", 
    //multi_selection: false,
    container: document.getElementById("container"),
    flash_swf_url : "lib/plupload-2.1.2/js/Moxie.swf",
    silverlight_xap_url : "lib/plupload-2.1.2/js/Moxie.xap",
    url : "http://oss.aliyuncs.com",

    filters: {
        mime_types : [ //设置允许上传的文件类型
        { title : "Support files", 
        extensions : "jpg,gif,png,bmp,Doc,Pdf,PPT,Xls,Docx,Pptx,Xlsx,txt,exe,apk,ipa,dmg,mp4,avi,Mov,Wmv,Mkv,F4v,flv,Rmvb,Mp3,Acc,Wav,php,html,htm,js,css,xml,py,java,ttf,otf,bat,dll,zip,rar" }
        ],
        max_file_size : "1024mb", //最大只能上传1024mb的文件
        prevent_duplicates : true //不允许选取重复文件
    },

    init: {
        PostInit: function() {
            document.getElementById("ossfile").innerHTML = "";
            document.getElementById("postfiles").onclick = function() {
            set_upload_param(uploader, "", false);
            return false;
            };
        },

        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
                document.getElementById("ossfile").innerHTML += "
" + file.name + " (" + plupload.formatSize(file.size) + ")"
                +"
"
                +"
"
                +"
";
            });
        },

        BeforeUpload: function(up, file) {
            check_object_radio();
            set_upload_param(up, file.name, true);
        },

        UploadProgress: function(up, file) {
            var d = document.getElementById(file.id);
            d.getElementsByTagName("b")[0].innerHTML = "" + file.percent + "%";
            var prog = d.getElementsByTagName("div")[0];
            var progBar = prog.getElementsByTagName("div")[0]
            progBar.style.width= 2*file.percent+"px";
            progBar.setAttribute("aria-valuenow", file.percent);
        },

        FileUploaded: function(up, file, info) {
            if (info.status == 200)
            {
                document.getElementById(file.id).getElementsByTagName("b")[0].innerHTML = "
上传完成！
https://oss.likeyunba.com/"+get_uploaded_object_name(file.name)+"";
            }
            else
            {
                document.getElementById(file.id).getElementsByTagName("b")[0].innerHTML = info.response;
            } 
        },

        Error: function(up, err) {
            if (err.code == -600) {
                document.getElementById("console").appendChild(document.createTextNode("
上传失败！文件大小不能超过1024MB"));
            }
            else if (err.code == -601) {
                document.getElementById("console").appendChild(document.createTextNode("
上传失败！不支持上传该文件后缀名"));
            }
            else if (err.code == -602) {
                document.getElementById("console").appendChild(document.createTextNode("
上传失败！服务器已存在该文件"));
            }
            else 
            {
                document.getElementById("console").appendChild(document.createTextNode("
Error xml:" + err.response));
            }
        }
    }
});

uploader.init();

OK，代码就这么多，但是还有一个lib文件夹还有很多文件，我这里直接把代码打包好。
https://pan.lanzou.com/i0jqwda

要注意的是，一定要保证bucket属性CORS设置支持POST方法。因为这个HTML直接上传到OSS，会产生跨域请求。必须在bucket属性里面设置允许跨域。

上图是在OSS控制台 - 基础设置 - 跨域设置里面设置的，把POST打勾，其它填*号即可。

demo：
http://oss-demo.aliyuncs.com/...

微信扫码查看demo：