七⽜云存储的JavascriptWeb前端⽂件上传因为我的个⼈⽹站已经启⽤，博客园的内容已经不再更新。请访问我的个⼈⽹站获取这篇⽂章的最新内容，
七⽜是不错的云存储产品，特别是有免费的配额可供使⽤，存点⼩⽂件或者博客的插图什么的还是不错的。以下介绍在⾃⼰的Web应⽤中上传⽂件到七⽜的⽅法。
基本思想
当我们想把本地的⽂件通过浏览器上传到⾃⼰的七⽜云存储空间上时，就有两种思路
1. 将⽂件直接上传到服务端，再由服务端将⽂件传输⾄七⽜
2. 向服务端请求七⽜的⽂件上传token，然后将⽂件上传⾄七⽜（授权式上传）
第1种⽅法较好解决，参考即可，第2种⽅法效率较⾼，这⾥介绍第2种。
使⽤Javascript在Web前端上传⽂件的⽅法，七⽜官⽅给出了和。核⼼内容在于这⼏点：
1. 指定上传按钮的ID
2. 创建⼀个uploader
2.1 绑定上传按钮的ID
2.2 设置获取上传token的服务端url
<div id="btn-uploader">
<a id="pickfiles" href="javascript:void 0;">Upload File</a>
</div>
这⾥上传按钮的ID是pickfiles
uploader = Qiniu.uploader({
//...
});
设置uploader的参数
七⽜的Javascript SDK使⽤到了，在初始化uploader时，可以为其传递Plupload中给定的，⽽不仅局限于七⽜例⼦中给出的。例如可以添
加multi_selection和filters来限制上传时，⽂件的选择。
⽂件命名
当⽂件上传⾄七⽜云存储时，⽂件的命名显得尤为重要，缺省情况下，七⽜会使⽤上传⽂件的名字命名，然⽽⽂件重名将难以避免，并且重名将导致⽆法上传或覆盖旧⽂件。为了解决这⼀问题，有三种⽅法
1. 由qiniu⾃动⽣成唯⼀的⽂件名，在uploader中设置unique_names=true
2. 由服务端⽣成⽂件名，在uploader中设置save_key=true，并且在服务端返回token时，设置policy.saveKey的值为所要保存的⽂件
名。
3. Web 前端⾃定义⽂件名，key函数中设置⽂件名，缺点是⽂件名⽆法有效管理。
以下使⽤Python和Flask框架为例，介绍服务端⽣成⽂件名的⽅法。
import json
import qiniu.rs
@ute("/qiniu-token/")
def qiniu_token():
policy = qiniu.rs.PutPolicy('your-bucket-name')
policy.saveKey = 'save_key'#设置上传⽂件的⽂件名
uptoken = ken()
return json.dumps({'uptoken': uptoken})
服务端会返回如下格式的JSON，⾥⾯已包含了⽂件名
{
"uptoken": ""
}
但是服务端仍⽆法获悉本地⽂件的⽂件类型，因此⽆法给出恰当的⽂件名，虽然设置⽂件名时缺失扩展名，不影响⽂件的下载，但明显不漂亮。
这时就需要先在本地先获取⽂件扩展名后，再向服务端请求，由服务端安排⼀个⽂件名（服务端掌握所有⽂件的信息，可以⽅便⽂件的命名和管理）。
在uploader的init参数中，有⼀个key参数，可以为其绑定函数来设置⽂件名。该函数启⽤的前提是save_key和unique_names设为false。
在key对应的函数中使⽤ajax向服务端请求⽂件名，然后与⽂件的扩展名组合后就得到了恰当的⽂件名了。特别注意的是，这⾥的ajax调⽤⽤使⽤同步的⽅式，因为需要在该函数返回前就得到服务端回应的信息，如果使⽤异步的⽅式，函数都返回了，服务端还没响应呢。
uploader = Qiniu.uploader({
//...
init: {
'Key': function(up, file) {
//当save_key和unique_names设为false时，该⽅法将被调⽤
var key = "";
$.ajax({
url: '/qiniu-token/get-key/',
type: 'GET',
async: false,//这⾥应设置为同步的⽅式
success: function(data) {
var ext = FileExtension(file.name);
key = data + '.' + ext;
},
cache: false
});
return key;
}
//...
}
});
以下是uploader的详细设置，其他完整的信息请参考七⽜的例⼦，并加以改造。
uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',//上传按钮的ID
container: 'btn-uploader',//上传按钮的上级元素ID
drop_element: 'btn-uploader',
max_file_size: '100mb',//最⼤⽂件限制
flash_swf_url: '/static/js/plupload/Moxie.swf',
dragdrop: false,
chunk_size: '4mb',//分块⼤⼩
uptoken_url: '/qiniu-token/',//设置请求qiniu-token的url
//Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
// uptoken : '<Your upload token>',
//若未指定uptoken_url，则必须指定 uptoken ,uptoken由其他程序⽣成
// unique_names: true,
// 默认 false，key为⽂件名。若开启该选项，SDK会为每个⽂件⾃动⽣成key（⽂件名）
/
/ save_key: true,
// 默认 false。若在服务端⽣成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进⾏任何处理
domain: 'your-bucket-name.qiniudn/',//⾃⼰的七⽜云存储空间域名
multi_selection: false,//是否允许同时选择多⽂件
//⽂件类型过滤，这⾥限制为图⽚类型
filters: {
mime_types : [
{title : "Image files", extensions: "jpg,jpeg,gif,png"}
]
},
auto_start: true,
init: {
'FilesAdded': function(up, files) {
//do something
},
'BeforeUpload': function(up, file) {
//do something
},
'UploadProgress': function(up, file) {
//可以在这⾥控制上传进度的显⽰
//可参考七⽜的例⼦
},
'UploadComplete': function() {
//do something
},
'FileUploaded': function(up, file, info) {
//每个⽂件上传成功后，处理相关的事情
//其中 info 是⽂件上传成功后，服务端返回的json，形式如
//{
//  "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
//  "key": "gogopher.jpg"
//}
var domain = up.getOption('domain');
var res = eval('(' + info + ')');
var sourceLink = domain + res.key;//获取上传⽂件的链接地址
//do something
},
'Error': function(up, err, errTip) {
alert(errTip);
},
'Key': function(up, file) {
//当save_key和unique_names设为false时，该⽅法将被调⽤            var key = "";
$.ajax({
url: '/qiniu-token/get-key/',
type: 'GET',
async: false,//这⾥应设置为同步的⽅式
success: function(data) {
var ext = FileExtension(file.name);
key = data + '.' + ext;
},
cache: false
});
return key;
}
}
前端大文件上传解决方案
});