原生JS处理多文件上传到腾讯云（对象存储）
写在前面
其实在这篇文章之前呢已经写过一篇关于文件上传的文章了，名字是文件上传腾讯云，如果看这篇文章的话，希望还是先看看我之气那写的那篇文章，不然下面的可能直接看的话会有一些迷惑。
废话不说，既然是上传，就免不了单文件或者多文件上传的问题，那么其实目前很多的框架都是有上传功能的，只要是将接口写好，直接用就行了，就是包括腾讯云也是提供一个接口我们直接使用就可以的，下面我们就使用腾讯的接口完成多文件上传的处理。
效果：
结果：
PS：状态是200的时候说明你是上传成功了！
文件上传有几个问题需要处理：
第一：拿到文件的名字
第二：拿到文件本身
第三：多文件的时候，需要将文件存储到数组里面，上传的时候遍历出来
这三个问题我们一个一个解决
拿到文件名字其实很简单：
selectedFile = document.getElementById('fileSelector').files[0];
filename = selectedFile.name;拿到文件本身也很简单：
selectedFile = document.getElementById('fileSelector').files[0];最后是将每一次用户选择以后的文件存储到数组里面，这个其实也不难：
var arrfilename = new Array();
var arrfile = new Array();
arrfilename.push(filename);
arrfile.push(selectedFile);最后这些都处理好了，我们就可以进行上传的操作了
看源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/cos-js-sdk-v5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input id="fileSelector" type="file" name="filename">
<div id="tab" class="tab">
<table>
<thead>
<tr><td>名称</td><td>大小</td></tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
<input id="submitBtn" type="button" οnclick="upload()" value="提交">
</body>
<script type="text/javascript">
var selectedFile;
var filename;
var arrfilename = new Array();
var arrfile = new Array();
$("#fileSelector").change(function(){
/* 选择文件操作*/
selectedFile = document.getElementById('fileSelector').files[0];
/* 拿到文件名字*/
filename = selectedFile.name;
/* 拿到文件大小*/
filesize = selectedFile.size;
/* 将文件名字和文件本身存进数组*/
arrfilename.push(filename);
arrfile.push(selectedFile);
/* 将文件和大小一一罗列出来*/
var tb = '<tr><td>'+filename+'</td><td>'+filesize+'</td></tr>';
console.log(count);
$("#tb").append(tb);
});
function upload(){
/* 遍历数组*/
for(var i = 0;i<=arrfilename.length;i++){
var cos = new COS({
SecretId: '*****************************',
SecretKey: '**************************',
})
cos.putObject({
Bucket: 'ky-1254466590',
Region: 'ap-shanghai',
/* 名字获取数组下标*/
Key: arrfilename[i],
StorageClass: 'STANDARD',
Body: arrfile[i], // 上传文件对象(通过下标获取)
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
console.log(err || data || - Url);
console.log("URL是："+data.Location);
});
}
}
</script>
</html>PS：代码是可以直接使用的，但是里面的js引用路径以及secretId和secretkey还有Bucket和Region的参数改成自己的就
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-09-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读