6

ここで初心者の質問。

ウェブページから直接cloudinaryに写真をアップロードしようとしています。

Cloudinaryが使用を推奨するjQueryプラグインは次のとおりです。

残念ながら、プラグインはまだ文書化されておらず、明確な「example.html」ファイルがありません。プラグインコードに頭を悩ませようとしましたが、今のところ成功していません。

「example.html」がどのように見えるかという点で、誰かが私を正しい方向に向けることができますか？

ありがとう。

4

3 に答える 3

4

Jquery SDKとサーバー SDK をダウンロードします。

Javaサーバー側のコードは次のとおりです。

サーバー側での署名の生成:

Java の JSP コードは次のとおりです。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.Map" %> 
<%@ page import="java.util.HashMap" %> 
<%@ page import="java.sql.Timestamp" %> 
<%@ page import="com.cloudinary.Cloudinary" %> 
<%
String timestamp=(new Long(System.currentTimeMillis() / 1000L)).toString();
Cloudinary cloudinary = new Cloudinary("cloudinary://CLOUDINARY_URL");
Map<String, Object> params = new HashMap<String, Object>();
Map options = Cloudinary.emptyMap();
boolean returnError = Cloudinary.asBoolean(options.get("return_error"), false);
String apiKey = Cloudinary.asString(options.get("api_key"), cloudinary.getStringConfig("api_key"));
if (apiKey == null)
    throw new IllegalArgumentException("Must supply api_key");
String apiSecret = Cloudinary.asString(options.get("api_secret"), cloudinary.getStringConfig("api_secret"));
if (apiSecret == null)
    throw new IllegalArgumentException("Must supply api_secret");
params.put("callback", "http://www.mcbjam.com/Scripts/vendor/cloudinary/html/cloudinary_cors.html");
params.put("timestamp", timestamp);
String expected_signature = cloudinary.apiSignRequest(params, apiSecret);%>

Cloudinary ダッシュボードで CLOUDINARY_URL を取得できます。サーバーのcloudinary SDKに含まれているcloudinary.apiSignRequestメソッドを使用しています。コールバックとタイムスタンプに署名します。

HTML と Javascript

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
    <script src="../Scripts/vendor/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.ui.widget.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.iframe-transport.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.fileupload.js"></script>
    <script src="../Scripts/vendor/cloudinary/jquery.cloudinary.js"></script> 
</head>
<body>
<script type="text/javascript">
   $.cloudinary.config({"api_key":"YOUR_API_KEY","cloud_name":"YOUR_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":  <%= timestamp %>, 
          "callback": "http://YOUR_DOMAIN/cloudinary_cors.html",
          "signature": "<%= expected_signature %>", 
          "api_key": "YOUR API KEY" };    
$('#uploadinput').attr('data-form-data', JSON.stringify(data));
</script>
</body>
</html>

ホストに cloudinary_cors.html を配置し、html のパスを変更します。APIKEY とクラウド名を設定します。

<%= タイムスタンプ %> と <%= expected_signature %> は、Java で計算される要素です。（phpでも同じことができます）。

私はこのコードを私のウェブサイトで使用していますhttp://paint.mcbjam.com 詳細はこちら: http://mcbjam.blogspot.fr/2013/05/integrer-cloudinary-pour-realiser-des.html in French .

于 2013-05-12T02:48:31.957 に答える
2

jQuery を使用したブラウザーから Cloudinary への直接アップロードについて説明している、最近公開されたブログ投稿を参照してください。

于 2012-08-29T15:33:56.630 に答える