第一步,首先要引入moxie.js,plupload.js,qiniu.js這個三個js文件，也可以直接訪問靜態文件CDN。鏈接給上https://developer.qiniu.com/kodo/sdk/javascript
下面給代碼：
var uploader = Qiniu.uploader({
runtimes: ‘html5,flash,html4’,
browse_button: ‘file’,//上傳按鈕的ID
max_file_size: ‘100mb’,//最大文件限制
uptoken_url: ‘getToken.do’, //Ajax請求upToken的Url，強烈建議設置（服務端提供）
/* uptoken_func:token,*/
dragdrop: false,
unique_names:true,
chunk_size: ‘4mb’,
/*
uptoken:token,
*/
domain: ”,//自己的七牛雲存儲空間域名
multi_selection: false,//是否允許同時選擇多文件
//文件類型過濾，這裏限制爲圖片類型
filters: {
mime_types : [
{title : “Image files”, extensions: “jpg,jpeg,gif,png”}
]
},
auto_start: true,
init: {
‘FilesAdded’: function(up, files) {
for (var i = 0; i < files.length; i++) {
showPreview (files[i]);
}
//do something
},
‘BeforeUpload’: function(up, file) {
//do something
},
‘UploadProgress’: function(up, file) {
//可以在這裏控制上傳進度的顯示
//可參考七牛的例子
},
‘UploadComplete’: function() {
//do something
},
‘FileUploaded’: function(up, file, info) {
//每個文件上傳成功後,處理相關的事情
//其中 info 是文件上傳成功後，服務端返回的json
var domain = up.getOption(‘domain’);
var res = eval(‘(’ + info + ‘)’);
var sourceLink = domain + res.key;//獲取上傳文件的鏈接地址
$(“#icon”).val(sourceLink);
},
}
});
獲取token的方式最好採用上面的url方式獲取，從你的後臺程序得到，值得注意的是，你的後臺返回token的格式應該爲｛“uptoken“:”…………”｝這樣的json格式纔會被七牛識別，不然一直401錯誤。
auto_start: true,這個屬性設置爲true的話，在你瀏覽圖片選定的時候就會自動上傳服務器。
- FileUploaded:function(),這個方法裏面寫的是上傳成功後七牛服務器返回的數據。我這裏做的操作是把返回值拼接成圖片鏈接地址，然後賦值給我的表單屬性（po類的屬性），提交時一塊提交給後臺，然後保存到數據庫。
第二步，如果想在提交的時候預覽圖片的話，首先需要一個img標籤，我這裏給的id爲img。代碼：
‘FilesAdded’: function(up, files) {
for (var i = 0; i < files.length; i++) {
showPreview (files[i]);
}
//do something
},
function showPreview (file) {
var preloader = new mOxie.Image();
preloader.onload = function() {
$(“#img”).attr( “src”, preloader.getAsDataURL() );
};
preloader.load( file.getSource() );
}