七牛上傳圖片視頻demo

/引入Plupload 、qiniu.js後

varuploader = Qiniu.uploader({ runtimes:'html5,flash,html4',//上傳模式,依次退化

browse_button:'pickfiles',//上傳選擇的點選按鈕，**必需**

uptoken_url:'/token',//Ajax請求upToken的Url，**強烈建議設置**（服務端提供）// uptoken : '', //若未指定uptoken_url,則必須指定 uptoken ,uptoken由其餘程序生成// unique_names: true, // 默認 false，key爲文件名。若開啓該選項，SDK爲自動生成上傳成功後的key（文件名）。// save_key: true, // 默認 false。若在服務端生成uptoken的上傳策略中指定了 `sava_key`，則開啓，SDK會忽略對key的處理

domain: 'http://qiniu-plupload.qiniudn.com/', //bucket 域名，下載資源時用到，**必需**

get_new_uptoken: false, //設置上傳文件的時候是否每次都從新獲取新的token

container: 'container', //上傳區域DOM ID，默認是browser_button的父元素，

max_file_size: '100mb', //最大文件體積限制

flash_swf_url: 'js/plupload/Moxie.swf', //引入flash,相對路徑

max_retries: 3, //上傳失敗最大重試次數

dragdrop: true, //開啓可拖曳上傳

multi_selection: false,// 設置一次只能選擇一個文件

drop_element: 'container', //拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳

chunk_size: '4mb', //分塊上傳時，每片的體積

auto_start: true, //選擇文件後自動上傳，若關閉須要本身綁定事件觸發上傳

init: { 'FilesAdded': function(up, files) { plupload.each(files, function(file) { // 文件添加進隊列後,處理相關的事情 }); },

'BeforeUpload': function(up, file) { // 每一個文件上傳前,處理相關的事情 },

'UploadProgress': function(up, file) { // 每一個文件上傳時,處理相關的事情 },

'FileUploaded': function(up, file, info) { // 每一個文件上傳成功後,處理相關的事情// 其中 info 是文件上傳成功後，服務端返回的json，形式如// {// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",// "key": "gogopher.jpg"// }// 參考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html// var domain = up.getOption('domain');// var res = parseJSON(info);// var sourceLink = domain + res.key; 獲取上傳成功後的文件的Url },

'Error': function(up, err, errTip) { //上傳出錯時,處理相關的事情 },

'UploadComplete': function() { //隊列文件處理完畢後,處理相關的事情 },

'Key': function(up, file) { // 若想在前端對每一個文件的key進行個性化處理，能夠配置該函數// 該配置必需要在 unique_names: false , save_key: false 時才生效var key = ""; // do something with key herereturn key } } }); // domain 爲七牛空間（bucket)對應的域名，選擇某個空間後，可經過"空間設置->基本設置->域名設置"查看獲取// uploader 爲一個plupload對象，繼承了全部plupload的方法，參考http://plupload.com/docs

 

demo：（進度條，圖片寬高，文件大小KB）

init: {

    'UploadProgress': function(up, file) {

        $("#percent").css("width",file.percent + "%")

    },

    'UploadComplete': function() {

        $("#percent").css("width",0 + '%');

    },

    'FileUploaded': function(up, file, info) {

        var domain = up.getOption('domain');

        var res = JSON.parse(info);

        var sourceLink ='http://'+domain + '/'+res.key;   //若是後臺已經拼接了‘http’這裏就不用拼接了

        var imageInfo = Qiniu.imageInfo(res.key);//獲取圖片原始大小

        //imageInfo.format  圖片格式   imageInfo.width  圖片寬   imageInfo.height 圖片高

        console.log(imageInfo);   //  Object {format: "png", width: 580, height: 446, colorModel: "rgba"}

 

        self.albumDetailModel.tempShowPicUrl = sourceLink;

        self.albumDetailModel.filesize = self.switchByteToM(file.size);

        self.scope.$apply();

    },

 

    'Error': function(up, err, errTip) {

        alert(errTip);

    }

},

filters : {

    max_file_size : '100mb',

    prevent_duplicates: true,  // 是否容許選取重複的文件,爲true時表示不容許,爲false時表示容許,默認爲false

    // Specify what files to browse for

    mime_types: [

        {title : "Image files", extensions : "jpg,png,jpeg,bmp"} // 限定jpg,jpeg,png等後綴上傳

    ]

}

 

//限制上傳視頻格式

filters : {

    max_file_size : '100mb',

    prevent_duplicates: true,

    mime_types: [      {title : "flv files", extensions : "flv"}, //限定flv後綴上傳格式上傳

{title : "Video files", extensions : "flv,mpg,mpeg,avi,wmv,mov,asf,rm,rmvb,mkv,m4v,mp4"}, //限定flv,mpg,mpeg,avi,wmv,mov,asf,rm,rmvb,mkv,m4v,mp4後綴格式上傳

{title : "Image files", extensions : "jpg,gif,png"}, //限定jpg,gif,png後綴上傳

{title : "Zip files", extensions : "zip"} //限定zip後綴上傳

    ]

}

 

七牛上傳視頻獲取縮略圖（jpg不行就試試png）

http://www.javashuo.com/article/p-vwpjvlnk-mh.html

 

七牛geek博客：（七牛相關問題）

http://blog.csdn.net/netdxy/article/details/50507161