<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阿里云上传图片</title>
<style>
#imgBox{
width:100%;
height: 100%;
border:1px solid #000;
}
.upDateImg{
height: 150px;
}
</style>
</head>
<body>
<input type="file" id="file" />
<div id="imgBox"></div>
</body>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
<script>
var client;
var file;
$.ajax({
type:"post",
url:"http://oss.beibeiyue.com/oss/getOSSToken",
data:{
type:1
},
dataType:"json",
success:function(res){
var bucket = 'ylbb-business';
var region = 'oss-cn-beijing'; //申请oss服务时的区域
if(res.result == 0){
client = new OSS.Wrapper({
region: region,
accessKeyId: res.data.accessKeyId,
accessKeySecret: res.data.accessKeySecret,
stsToken: res.data.securityToken,
bucket: bucket
});
}
},
fail:function(){
mui.toast("网络连接失败,请稍后再试")
}
}); document.getElementById('file').addEventListener('change', function (e) {
file = e.target.files[0];
//采用时间戳重命名
var last=file.name.substr(file.name.lastIndexOf("."),file.name.length)
var fileName=Date.parse(new Date()) + last;
client.multipartUpload(fileName, file, {}).then(function(res) { //参数fileName为图片名称，参数file为图片
//上传成功后的图片地址
var fileUrl = res.url ? res.url : 'http://'+ res.bucket + '.oss-cn-beijing.aliyuncs.com/' + res.name;
console.log(fileUrl)
//上传成功
var picture=document.createElement("img");
picture.setAttribute("class","upDateImg")
picture.src=fileUrl
$("#imgBox").append(picture);
//删除
$("img").on("click",function(){
console.log(this)
$(this).remove()
})
}, function() {
console.log('上传文件失败','warning');
})
});
</script>
</html>