废话不多说直接上代码：（看到的一篇php上传博客，进行的修改完善）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.filePicker {
margin: 50px;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: -webkit-gradient(linear, 10 10, 90% 100%, from(#ff8c00), to(#ff5500));
}
.filePicker label {
display: block;
width: 100%;
height: 100%;
}
.filePicker input[type="file"] {
display: none;
}
.preview_box img {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="sign" style="text-align: center;">ossweb直传</div>
<div class="filePicker">
<input id="img_input" type="file" accept="image/*" />
<label for="img_input">上传图片</label>
</div>
<div class="preview_box">
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="js/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="js/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="js/lib/base64.js"></script>
<script type="text/javascript">
var policyText = {
"expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
]
};
accessid = '你的id';
accesskey = '你的key';
host = '你的oss路径';
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);
$("#img_input").on("change", function(e) {
var file = e.target.files[0]; //获取图片资源
var filename = file.name;
// 只选择图片文件
if(!file.type.match('image.*')) {
return false;
}
var ossData = new FormData();
// 先请求授权，然后回调
var timestamp3 = new Date().getTime(); //时间磋
var json = new Object;
json.accessid = accessid;
json.policy = policyBase64;
json.signature = signature;
json.key = timestamp3;
// 添加配置参数
ossData.append('OSSAccessKeyId', json.accessid);
ossData.append('policy', json.policy);
ossData.append('Signature', json.signature);
ossData.append('key', json.key);
ossData.append('success_action_status', 201); // 指定返回的状态码
ossData.append('file', file, timestamp3);
$.ajax({
url: host,
data: ossData,
dataType: 'xml', // 这里加个对返回内容的类型指定
processData: false,
contentType: false,
type: 'POST'
}).done(function(data) {
console.log(data);
// 返回的上传信息
if($(data).find('PostResponse')) {
var res = $(data).find('PostResponse');
console.info('Bucket：' + res.find('Bucket').text());
console.info('Location：' + res.find('Location').text());
console.info('Key：' + res.find('Key').text());
console.info('ETag：' + res.find('ETag').text());
}
// 图片预览
var img = new Image();
img.src = res.find('Location').text();
img.onload = function() {
$(".preview_box").append(img);
};
});
});
</script>
</html>
注：这里的oss信息都是前端写进去的非常不推荐，一定要和后端对接（签名，id ，key 这些东西）；
当然，crypto.js hmac.js sha1.js base64.js 这些都是可以不用引入的。当然我们的demo是没有后端配合的。
但是，这里还是为大家提供加密的链接 crypto.js http://blog.csdn.net/wangcunh…
(有问题大家一起讨论，欢迎评论，点赞，收藏)。
