用jquery的ajax方法上传文件到七牛和常规的ajax有点区别，直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var $input = $('#upload-qiniu');
var token = 'sMTdcnRxls_IaTJ1uSOR1Rb7zFkcdJq3LK0MPjR1:4k547QcZwzo2fK7zPJeu28UgXNM=:eyJzY29wZSI6Im9haGEiLCJkZWFkbGluZSI6MTQ0MTk2NzY1Mn0=';
var url = 'http://up.qiniu.com/';
var prefix = 'http://7vii28.com1.z0.glb.clouddn.com/';

$input.on('change', function(){
	var me = $(this);
	var file = this.files[0];     
	var formData = new FormData(),
	    filename = file.name;
	formData.append('token', token);
	formData.append("file", file);
	$.ajax({  
		url : url,  
		type : 'POST',  
		data : formData, 
		processData : false, // 对数据不作处理
		contentType : false // 使用原始类型
	}).done(function(json){ 
		console.log(json);
	}).fail(function(json){                
		console.log(json.responseJSON.error);
	});              
});

例子

如果不能上传，可能是因为token已过期，可以用开发者工具查看xhr请求。

说明

ajax方法中的processData和contentType需要设置为false，关于这两个参数介绍：

  • processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
  • contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。