写在前面
其实在这篇文章之前呢已经写过一篇关于文件上传的文章了,名字是文件上传腾讯云,如果看这篇文章的话,希望还是先看看我之气那写的那篇文章,不然下面的可能直接看的话会有一些迷惑。
废话不说,既然是上传,就免不了单文件或者多文件上传的问题,那么其实目前很多的框架都是有上传功能的,只要是将接口写好,直接用就行了,就是包括腾讯云也是提供一个接口我们直接使用就可以的,下面我们就使用腾讯的接口完成多文件上传的处理。
效果:
结果:
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的参数改成自己的就