前端七牛云分片上传pc端

https://blog.csdn.net/liuqi1314520/article/details/111149869
html代码

<input id=”c-urlfile2″ required=”required” class=”form-control” size=”50″ name=”row[urlfile]” type=”text”  value=”{$row.urlfile|htmlentities}”>
<div class=”input-group-addon no-border no-padding”>
<div id=”box”>
<input type=”file” id=”select”  class=”btn ”  />
</div>
<div style=’overflow:hidden’>
<div id=’totalBar’ style=’width:60%;’>
<p class=’speed’></p>
</div>
</div>
</div>

js代码

<script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://unpkg.com/[email protected]/dist/qiniu.min.js”></script>
<script>
var token = “你的七牛云token”;
console.log(qiniu)
// z1华北 z2 华南
let config = {
useCdnDomain: true,
region: qiniu.region.z2
};
let putExtra = {
fname: “”,
params: {},
mimeType: null
};

function randomString(e) {
e = e || 32;
var t = “ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678”,
a = t.length,
n = “”;
for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
return n
}
$(“#select”).change(function(){
let file = this.files[0];
let key = file.name;
var point = key.lastIndexOf(“.”);
var type = key.substr(point);
var filename = randomString(16)+type;
console.log(point);
let subscription;
// 调用sdk上传接口获得相应的observable，控制上传和暂停
let observable = qiniu.upload(file, filename, token, putExtra, config);
let observer ={
next(result){                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
let total = result.total;
$(“.speed”).text(“进度：” + total.percent + “% “);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
},
error(err){                          //失败后
alert(err.message);
},
complete(res){
$(“#c-urlfile2”).val(res.key);
console.log(res)                   //成功后
// ?imageView2/2/h/100：展示缩略图，不加显示原图
// ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高
}
}
// 取消上传
// subscription.unsubscribe();
observable.subscribe(observer)
})

</script>