前端上传图片到七牛云
- 首先，引入qiniu.js;
- 定义一个div元素，结构看代码
- 然后，上传七牛云
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七牛云</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div class="aabb">
<div id="container" class="containe c-zy-up-item">
<div id="pickfiles">
<span><i class="iconfont iconjiahao"></i></span>
</div>
</div>
</div>
<div class="c-zy-up-img"></div>
<script src="../js/jquery.js"></script>
<script src="../js/qn/qiniu.min.js"></script>
<script>
var imgurl = xxx
$.ajax({
type: "post",
url: '获取token的接口',
dataType: "json",
success: function(data) {
upToken = data.upToken
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
uptoken: data.data.UpToken,
get_new_uptoken: false,
domain: data.data.LinkUrl,
container: 'container',
max_file_size: '100mb',
flash_swf_url: 'path/of/plupload/Moxie.swf',
max_retries: 3,
dragdrop: false,
chunk_size: '4mb',
auto_start: true,
init: {
'FileUploaded': function(up, file, info) {
// 成功
console.log(data.data.LinkUrl + imgurl + '/' + file.name)
},
'Error': function(up, err, errTip) {
//失败
},
'Key': function(up, file) {
var key = imgurl + '/' + file.name;
return key;
}
}
});
}
});
</script>
</body>
</html>
网友评论