<!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>