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

Posted 2023-03-25

技术标签:

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

这里是初学者的问题。

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

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

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

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

谢谢。

【问题讨论】：

【参考方案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 有一个名为“未签名上传”的功能，允许您在没有服务器端签名的情况下执行此操作。

以上是关于如何使用 Cloudinary jQuery 插件直接从页面上传图片？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用cloudinary的jquery显示成功信息

如何在 jquery 中向 cloudinary 文件上传（）添加可选参数？

使用 jQuery 使用 Cloudinary API 直接上传图片

Cloudinary 客户端直接上传，无需 jQuery

Heroku Cloudinary 插件与 cloudinary.com。有啥不同？

如何在 Rails 中使用 Cloudinary 将直接上传字段与模型相关联？