<html>
<head>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var count = 0;
var config = {
useCdnDomain: true,
region: qiniu.region.z0
};
var file = undefined
function bindToFile() {
$('#thisFile').unbind('change').bind('change', function () {
file = this.files;
});
}
function upload() {
var t2 = window.setInterval(function () {
if (file.length == count) {
alert("success");
window.clearInterval(t2);
}
}, 1000)
$('#jindutiao').html("");
//get file extension
//TODO judge the extension
//send the ajax request
//you can deliever file extension through data
for (var i = 0; i < file.length; i++) {
(function (index) {
var html1 = $('#jindutiao').html();
var html2 = html1 + "<br><input type = 'text' id='jindutiao" + i + "'/> ";
$('#jindutiao').html(html2);
var observer = {
next(res) {
$('#jindutiao' + index).val(res.total.percent);
},
error(err) {
},
complete(res) {
count++;
}
}
var timestamp1 = Date.parse(new Date());
var token = 'bjtWBQXrcxgo7HWwlC_bgHg81j352_GhgBGZPeOW:UaQRvFLUuB9mjtSEqp_GqiR7ahU=:eyJzY29wZSI6ImdlYm8iLCJkZWFkbGluZSI6MTYwMDMyOTAyOH0=';
var putExtra = {
fname: file[index].name + timestamp1,
params: {},
};
var observable = qiniu.upload(file[index], file[index].name + timestamp1, token, putExtra, config)
var subscription = observable.subscribe(observer)
})(i);
}
}
window.onload = bindToFile;
</script>
</head>
<body>
<input type='file' multiple="multiple" id='thisFile' />
<br>
<input type='button' value='upload' οnclick="upload()">
<span id='jindutiao'></span>
</body>
</html>