使用 HTML 5 相关 API 开发的分块上传 DEMO
在您决定将本项目用于生产环境之前,请确保知晓如何保护表单密钥的安全性,以及本项目在部分低配设备上可能会有的兼容性和性能问题!
你可以通过如下两种方式中任意一种引入本项目:
$ bower install --save upyun-multipart-upload
<script src="/path/to/spark-md5/spark-md5.js"></script>
<script src="/path/to/async/lib/async.js"></script>
<script src="/path/to/js-multipart-upload/lib/upyun-mu.js"></script>
eg:
document.getElementById('submit').onclick = function() {
var ext = '.' + document.getElementById('file').files[0].name.split('.').pop();
var config = {
bucket: 'demonstration',
expiration: parseInt((new Date().getTime() + 3600000) / 1000),
signature: 'something'
};
var instance = new Sand(config);
var options = {
'notify_url': 'http://upyun.com'
};
instance.setOptions(options);
instance.upload('/upload/test' + parseInt((new Date().getTime() + 3600000) / 1000) + ext);
};
new Sand(config);
参数说明
config
必要参数bucket
: 空间名称expiration
: 上传请求过期时间(单位为:秒
)signature
: 初始化上传所需的签名form_api_secret
: 表单 API (慎用)
注意
其中 signature
和 form_api_secret
为互斥项,为了避免表单 API 泄露造成安全隐患,请尽可能根据所需参数自行传入初始化上传所需的 signature
参数
计算签名算法,请参考文档
instance.setOptions(options)
参数说明
options
: Object 类型,包含额外的上传参数(详情见 表单 API Policy)
instance.upload(path)
参数说明
path
: 文件在空间中的存放路径
上传完成后,会触发自定义事件 uploaded
, 在事件对象中,会包含一些基本的信息,以供使用
上传出错,会触发自定义事件 error
, 在事件对象中,会包含错误的详情