117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||
<title>OSS web直传</title>
|
||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
|
||
<h4>您所选择的文件列表：</h4>
|
||
<div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>
|
||
|
||
<br/>
|
||
|
||
<div id="container">
|
||
<a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a>
|
||
<a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a>
|
||
</div>
|
||
|
||
<pre id="console"></pre>
|
||
|
||
</body>
|
||
<script type="text/javascript" src="lib/crypto1/crypto/crypto.js"></script>
|
||
<script type="text/javascript" src="lib/crypto1/hmac/hmac.js"></script>
|
||
<script type="text/javascript" src="lib/crypto1/sha1/sha1.js"></script>
|
||
<script type="text/javascript" src="lib/base64.js"></script>
|
||
<script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
|
||
<script>
|
||
var policyText = {
|
||
"expiration": "2023-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
|
||
"conditions": [
|
||
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
|
||
]
|
||
};
|
||
|
||
accessid = 'LTAI4G4vE6yQ8YRztNZ65Wrf';
|
||
accesskey = 'OCyBu0ThZOgSHz2JLHyXOm7evWf0NA';
|
||
host = 'https://ytyss.oss-cn-beijing.aliyuncs.com';
|
||
dirname = 'abc/';
|
||
|
||
|
||
var policyBase64 = Base64.encode(JSON.stringify(policyText))
|
||
message = policyBase64
|
||
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
|
||
asBytes: true
|
||
});
|
||
var signature = Crypto.util.bytesToBase64(bytes);
|
||
var uploader = new plupload.Uploader({
|
||
runtimes: 'html5,flash,silverlight,html4',
|
||
browse_button: 'selectfiles',
|
||
//runtimes : 'flash',
|
||
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: host,
|
||
|
||
multipart_params: {
|
||
'Filename': '${filename}',
|
||
'key': dirname + '${filename}',
|
||
'policy': policyBase64,
|
||
'OSSAccessKeyId': accessid,
|
||
'success_action_status': '200', //让服务端返回200,不然，默认会返回204
|
||
'signature': signature,
|
||
},
|
||
|
||
init: {
|
||
PostInit: function() {
|
||
document.getElementById('ossfile').innerHTML = '';
|
||
document.getElementById('postfiles').onclick = function() {
|
||
uploader.start();
|
||
return false;
|
||
};
|
||
},
|
||
|
||
FilesAdded: function(up, files) {
|
||
plupload.each(files, function(file) {
|
||
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>' +
|
||
'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>' +
|
||
'</div>';
|
||
});
|
||
},
|
||
|
||
UploadProgress: function(up, file) {
|
||
var d = document.getElementById(file.id);
|
||
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
|
||
|
||
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) {
|
||
//alert(info.status)
|
||
if (info.status >= 200 || info.status < 200) {
|
||
console.log(info)
|
||
} else {
|
||
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
|
||
}
|
||
},
|
||
|
||
Error: function(up, err) {
|
||
document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
|
||
}
|
||
}
|
||
});
|
||
|
||
uploader.init();
|
||
</script>
|
||
|
||
</html> |