本文將介紹如何通過Ajax將圖片上傳到七牛。七牛是一家云存儲服務提供商，為開發者提供快速、穩定的圖片存儲和管理服務。通過Ajax可以實現無刷新上傳圖片，并且可以獲得七牛生成的圖片URL，方便在頁面上展示圖片。

首先，我們需要調用七牛的接口獲取上傳憑證，用于后續的圖片上傳操作。以下是獲取上傳憑證的示例代碼：

$.ajax({
url: 'http://your-domain/get-upload-token',
type: 'GET',
success: function(data) {
var uploadToken = data.token; // 獲取到上傳憑證
// 然后執行圖片上傳操作
}
});

在成功獲取上傳憑證后，就可以進行圖片上傳了。以下是通過Ajax將圖片上傳到七牛的示例代碼：

var formData = new FormData();
formData.append('file', file); // 將文件添加到FormData中
$.ajax({
url: 'http://upload.qiniup.com', // 七牛上傳地址
type: 'POST',
data: formData, // 上傳的FormData對象
processData: false, // 不要處理數據
contentType: false, // 不要設置Content-Type請求頭
headers: {
'Authorization': 'UpToken ' + uploadToken // 使用上傳憑證作為Authorization請求頭
},
success: function(data) {
var imageUrl = 'http://your-domain/' + data.key; // 獲取七牛生成的圖片URL
// 在頁面上展示上傳后的圖片
$('#preview').attr('src', imageUrl);
}
});

在上述代碼中，我們使用了FormData來將圖片文件添加到請求中，并通過POST請求將圖片上傳到七牛。需要注意的是，需要設置processData為false，告訴jQuery不要處理數據，同時設置contentType為false，告訴jQuery不要設置Content-Type請求頭，否則會導致七牛無法解析上傳的數據。

最后，我們可以通過data.key獲取到七牛生成的圖片URL，然后在頁面上展示上傳后的圖片。在以上示例中，我們假設將展示圖片的元素的id為"preview"，通過設置其src屬性為圖片URL，即可顯示上傳后的圖片。

使用Ajax將圖片上傳到七牛可以實現無刷新上傳，并且能夠方便地獲取到七牛生成的圖片URL，方便在頁面上展示圖片。通過以上示例代碼，我們可以輕松地實現這一功能。