js上传到七牛云支持大文件
http://cdn.guojiz.mixinnet.cn/2024-01-29-65b7bcac34689qiniu.min.js
qiniu.min.js
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>七牛云</title>
<link rel="stylesheet" href="/public/static/layui/css/layui.css">
<script type="text/javascript" src="/public/static/js/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="/public/static/layui/layui.js"></script>
<script type="text/javascript" src="/public/static/layui/modules/qiniuyun/qiniu.min.js"></script>
<style type="text/css" media="all">
.content{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
text-align: center;
width: 70%;
background-color: white;
padding: 50px 0;
border-radius: 10px;
border: 1px solid #e5e5e5;
}
.content .text{
margin-top: 10px;
}
.content .percent {
text-align: center;
margin-left: calc(50% - 100px);
width: 200px;
margin-top: 20px;
}
.z{
position: fixed;
background-color: #f7f7f7;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="z" onclick="navigateBack()"></div>
<div class="content" id="content" onclick="openFileDialog()">
<svg t="1706538184871" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9750" width="64" height="64"><path d="M952.691201 303.205124c125.345838 33.636803 217.298619 151.54842 217.298619 286.400311a291.823636 291.823636 0 0 1-292.493935 294.68764h-41.802258v-84.335751H877.495885a210.534697 210.534697 0 0 0 0-421.008458 292.493935 292.493935 0 1 0-584.98787 0 210.534697 210.534697 0 0 0 0 421.008458h41.802258v84.213878H292.508015A291.823636 291.823636 0 0 1 0.01408 589.483563c0-134.730019 91.952781-252.641636 217.298619-286.400312a374.575046 374.575046 0 0 1 735.378502 0zM617.785645 478.396804l118.703789 124.492731a42.984421 42.984421 0 0 1-61.423726 60.144065l-49.114607-47.225583v364.94712a41.010087 41.010087 0 1 1-81.898302 0v-364.886184l-49.114606 47.225584a42.984421 42.984421 0 0 1-61.423727-60.144066L556.361919 478.396804c4.082728-4.326473 8.165456-8.592009 12.187247-8.59201 16.452784-8.531073 32.844631-4.265537 49.236479 8.59201z" fill="#707070" opacity=".9" p-id="9751"></path></svg>
<div class="text">点击选择文件<span></span></div>
<div class="percent">
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="filter-progress">
<div class="layui-progress-bar" lay-percent="0%"></div>
</div>
</div>
</div>
<!--accept="video/*"-->
<input type="file" id="filebutton" style="display:none" onchange="fileSelected()">
<script type="text/javascript">
function navigateBack(){
// uni.navigateBack({
// delta: 1
// });
}
function openFileDialog(){
document.getElementById("filebutton").click();
}
function fileSelected() {
var fbutton = $("#filebutton")[0]; //dom元素
var reader = new FileReader();
var file = fbutton.files[0];
reader.readAsDataURL(file);
ajaxup(file);
}
function ajaxup(file){
var data = {
name:file.name,
type:file.type,
size:file.size,
}
$.ajax({
url : "/index.php/file/token.html",
type : "POST",
data : data,
success:function(res){
// return;
// res = JSON.parse(res);
if(res.code == 1){
console.log(res)
var putExtra = {
fname: file.name,
mimeType: file.type
};
var config = {
useCdnDomain: true,
region: qiniu.region.z0
};
// qiniu.region.z0: 代表华东区域
// qiniu.region.z1: 代表华北区域
// qiniu.region.z2: 代表华南区域
// qiniu.region.na0: 代表北美区域
// qiniu.region.as0: 代表新加坡区域
var key = res.name;
var token = res.token
var observable = qiniu.upload(file, key, token, putExtra, config)
var observer = {
next(res){
var num = Math.floor(res.total.percent)
var element = layui.element;
element.progress('filter-progress', num+'%'); // 设置 50% 的进度
// console.log(num)
},
error(err){
layer.msg('上传失败', {icon: 2});
},
complete(re){
layer.msg('上传成功', {icon: 1});
console.log(res.domain+re.key)
// console.log(res.domain+re.key)
// uni.postMessage({
// data: {
// url: res.domain+re.key
// }
// });
// setTimeout(function() {
// uni.navigateBack({
// delta: 1
// });
// }, 2000);
}
}
var subscription = observable.subscribe(observer)
}else if(res.code == 2){
layer.msg('上传成功', {icon: 1});
var element = layui.element;
element.progress('filter-progress', '100%');
console.log(res.url)
// uni.postMessage({
// data: {
// url: res.url
// }
// });
// setTimeout(function() {
// uni.navigateBack({
// delta: 1
// });
// }, 2000);
}else{
}
}
})
}
</script>
</body>
</html>
