jsフロントエンドプレビュー画像を七牛サーバにアップロードし、画像パスをデータベースに保存する方法
2068 ワード
まずmoxieを導入する.js,plupload.js,qiniu.jsという3つのjsファイルは、静的ファイルCDNに直接アクセスすることもできます.リンク先https://developer.qiniu.com/kodo/sdk/javascript
コードを次に示します.
var uploader = Qiniu.uploader({runtimes:‘html 5,flash,html 4’,browse_button:‘file’,//アップロードボタンのID max_file_size:‘100 mb’,//最大ファイル制限uptoken_url:‘getToken.do’,//jax要求upTokenのUrl,設定を強く推奨(サービス側提供) /* uptoken_func:token,*/ dragdrop: false, unique_names:true, chunk_size:‘4 mb’,/*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.getooption(‘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()このメソッドには、アップロードに成功した後、7牛サーバから返されたデータが書かれています.ここで行う操作は、戻り値をピクチャリンクアドレスにつなぎ、フォーム属性(poクラスの属性)に値を割り当て、コミット時にバックグラウンドに1つずつコミットし、データベースに保存することです.
第2歩、提出時に画像をプレビューしたい場合は、まず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() ); }
コードを次に示します.
var uploader = Qiniu.uploader({runtimes:‘html 5,flash,html 4’,browse_button:‘file’,//アップロードボタンのID max_file_size:‘100 mb’,//最大ファイル制限uptoken_url:‘getToken.do’,//jax要求upTokenのUrl,設定を強く推奨(サービス側提供) /* uptoken_func:token,*/ dragdrop: false, unique_names:true, chunk_size:‘4 mb’,/*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.getooption(‘domain’);var res=eval('+info+');var sourceLink=domain+res.key;//アップロードファイルのリンクアドレス$("#icon").val(sourceLink);
},
}
});
第2歩、提出時に画像をプレビューしたい場合は、まず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() ); }