2016-05-13 9 views
1

jQueryを使用したCloudly画像アップロードAPIを使用して画像をアップロードしようとしています。私はそれについて全く知らない。私は次のコードを使用しています。 私はシグネチャパラメータでどのような値を使用するのか分かりません。jQueryを使用したCloudinary APIを使用した直接画像アップロード

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <title>Insert title here</title> 
     <script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
     <script src="js/jquery.ui.widget.js"></script> 
     <script src="js/jquery.iframe-transport.js"></script> 
     <script src="js/jquery.fileupload.js"></script> 
     <script src="js/jquery.cloudinary.js"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      $.cloudinary.config({"api_key":"api_key","cloud_name":"cloud_name"}); 
     </script> 
     <input name="file" type="file" id="uploadinput" 
      class="cloudinary-fileupload" data-cloudinary-field="image_upload" 
      data-form-data="" ></input> 
     <script> 
      var data = { "timestamp": '', 
       "callback": "http//localhost/cloudinar/index.php?message='file  has been uploaded'", 
       "signature": "", 
       "api_key": "api_key" };  
       $('#uploadinput').attr('data-form-data', JSON.stringify(data)); 
     </script> 
    </body> 
</html> 

答えて

1

Cloudyのサーバー側SDKは、自動的に対応する署名を含む入力フィールドを自動的に生成することをサポートしています。私はthis postに向けた http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser

+0

タイトルが「直接画像アップロード...」と言っていることを正確に知りたいのですが、この回答は何らかの形では役に立ちません。Cloundinaryに関する文書はひどいです。なぜ私は既に入力フィールドを生成したいのですか?なぜ、コードが既存の要素に接続されているだけで、3〜5行のコードでサーバーにデータを送信できないのですか?そのような簡単なことのための5つのスクリプトを含む、非常識なようだ。 – vsync

+0

サーバー側のコードは、1行のコードでこれを単純化できます。しかし、実際には、すでに追加された入力フィールドでCloudnableを操作することもできます。 'data-form-data'の動的なjavascriptの追加は、あなたが共有した例のようには機能しません。それは別のやり方で行うことができます。 - https://support.cloudinary.com/hc/en-us/articles/202519952-Why-is-updating-a-cloudinary-fileupload-field-dynamically-not-working-を参照してください。 –

1

サポートと話をした後、できるだけ簡単に、Cloudinaryに直接ファイルをアップロードする方法を示し、「unsigned」メソッドで::(PHPで例えば、)詳細については

$('.upload_field').unsigned_cloudinary_upload("zcudy0uz", 
    { cloud_name:'demo', tags:'browser_uploads' }, 
    { multiple:true } 
) 
.on('cloudinarydone', function(e, data){ 
    var opts = { 
     format : 'jpg', 
     width : 150, 
     height : 100, 
     crop : 'thumb', 
     gravity : 'face', 
     effect : 'saturation:50' 
    }; 

    $('.thumbnails').append($.cloudinary.image(data.result.public_id, opts)) 
}) 
.on('cloudinaryprogress', function(e, data){ 
    var W = Math.round((data.loaded * 100.0)/data.total) // % 
    $('.progress_bar').css('width', W + '%'); 
}); 

また、サポートメールに回答した「Maor Gariv」という名前の人が私にdemo pageを与えました。

関連する問題