如何使用 Cloudinary jQuery 插件直接从页面上传图片？答案

【问题标题】：How to use Cloudinary jQuery plugin to upload images directly from a page?如何使用 Cloudinary jQuery 插件直接从页面上传图片？
【发布时间】：2012-08-14 16:53:20
【问题描述】：

这里是初学者的问题。

我正在尝试将网页中的照片直接上传到cloudinary。

Here是Cloudinary推荐使用的jQuery插件。

很遗憾，该插件尚未记录在案，并且没有明确的“example.html”文件。我试图了解插件代码，但到目前为止没有成功。

有人能给我指出“example.html”应该是什么样子的正确方向吗？

谢谢。

【问题讨论】：

标签： jquery-plugins cloudinary

【解决方案1】：

下载 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.apiSignRequest 方法，该方法包含在服务器 cloudinary sdk 中。我签署了回调和时间戳。

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 和您的云名称。

和是在 java 上计算的元素。（你可以在 php 上做同样的事情）。

我在我的网站上使用此代码http://paint.mcbjam.com 您可以在此处了解更多详细信息：http://mcbjam.blogspot.fr/2013/05/integrer-cloudinary-pour-realiser-des.html 法语。

【讨论】：

感谢您的回答以及后端 java 的链接。您的代码简洁易懂。

【解决方案2】：

请参阅最近发布的关于使用 jQuery 从浏览器直接上传到 Cloudinary 的博文：http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

【讨论】：

如果 Cloudinary 在 github 上有可用的基本示例，那就太好了。对于 Django，一个简单的示例应用程序将大大简化集成。喜欢这项服务，但它可以使用一些改进的文档。
我同意。这篇博文让 rails 和 django 变得非常简单，但是对于任何其他平台来说，还有很多东西需要学习。我目前正试图让它在 node.js 后端上工作，并且对如何生成签名感到困惑。一个简单的端到端示例会走很长的路。
链接的博客文章很有帮助，但并不完整。例如，“render_to_response”没有正确定义，变量“p”在设置之前被使用。一个完整的例子会很有帮助。

【解决方案3】：

您不能仅使用纯 html 将图像上传到 Cloudinary。您需要一个服务器来签署您的请求参数。所以，这是你的 example.html 文件：

<html>
        <head>
            <title></title>
            <script src='jquery.min.js' type='text/javascript'></script>
            <script src='jquery.ui.widget.js' type='text/javascript'></script>
            <script src='jquery.iframe-transport.js' type='text/javascript'></script>
            <script src='jquery.fileupload.js' type='text/javascript'></script>
            <script src='jquery.cloudinary.js' type='text/javascript'></script>
            <script type = "text/javascript">
                $.cloudinary.config({ cloud_name: 'sample', api_key: '874837483274837'});
            </script>
        </head>
        <body>
            <input name="file" type="file" 
               class="cloudinary-fileupload" data-cloudinary-field="image_id" 
               data-form-data="--signedData--" />
        </body>
</html>

注意：data-form-data 属性中的 signedData 是由服务器端代码生成的 JSONObject，其中包含请求参数的 sha1Hex 签名。

一个例子如下：

{
    "api_key": "874837483274837",
    "timestamp": "1234567890",
    "public_id": "sample",
    "signature": "de9f2c7fd25e1b3afad3e85a0bd17d9b100db4b3"
}

另外，让我明确一点，您不需要任何其他按钮来上传文件，只需选择文件就会触发 jQuery 事件并将请求参数发送到 Cloudinary。

你可以在javahere上找到关于生成签名的信息。

【讨论】：

Cloudinary 有一个名为“未签名上传”的功能，允许您在没有服务器端签名的情况下执行此操作。