Fatal编程技术网
  • jquery-plugins/
  • Jquery plugins 如何使用Cloudinary jQuery插件直接从页面上传图像？

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

jquery-plugins

Jquery plugins 如何使用Cloudinary jQuery插件直接从页面上传图像？,jquery-plugins,cloudinary,Jquery Plugins,Cloudinary,这里是初学者的问题 我正在尝试将照片从网页直接上载到 是Cloudinary建议使用的jQuery插件 不幸的是，这个插件还没有文档记录，并且没有一个清晰的“example.html”文件。 我试着了解一下插件代码，但到目前为止没有成功 有人能告诉我“example.html”应该是什么样子吗 谢谢。请查看最近发布的博客文章，内容涉及使用jQuery直接从浏览器上传到Cloudinary：下载jQuery SDK和服务器SDK 以下是java服务器端的代码： 正在服务器端生成签名： 以下是jav

这里是初学者的问题

我正在尝试将照片从网页直接上载到

是Cloudinary建议使用的jQuery插件

不幸的是，这个插件还没有文档记录，并且没有一个清晰的“example.html”文件。 我试着了解一下插件代码，但到目前为止没有成功

有人能告诉我“example.html”应该是什么样子吗

谢谢。

请查看最近发布的博客文章，内容涉及使用jQuery直接从浏览器上传到Cloudinary：

下载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\u URL。 我使用服务器cloudinary sdk中包含的cloudinary.apisingRequest方法。我在回调和时间戳上签名

HTML和Javascript 

在此处插入标题
$.cloudinary.config（{“api_key”：“YOUR_api_key”，“cloud_name”：“YOUR_cloud_name”}）；
变量数据={“时间戳”：，
“回调”：http://YOUR_DOMAIN/cloudinary_cors.html",
“签字”：“，
“api_密钥”：“您的api密钥”}；
$（'#uploadinput'）.attr（'data-form-data'，JSON.stringify（data））；
将cloudinary_cors.html放在主机上，并修改html上的路径。设置APIKEY和云名称

并且是java上的元素calculate。（在php上也可以这样做）

我在我的网站上使用此代码
您在这里有更多详细信息：法语。

您不能仅使用普通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>
另外，让我向您说明，上传文件不需要任何其他按钮，只需选择文件就会触发jQuery事件并将请求参数发送到Cloudinary

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

如果Cloudinary在github上有一些简单的示例，那就太好了。对于Django来说，一个简单的示例应用程序将大大简化集成。我喜欢这项服务，但它需要一些改进的文档。我同意。这篇博文让rails和django变得不可思议地简单，但对于其他平台来说，还有很多东西需要通过艰苦的学习。我目前正试图让它在node.js后端工作，但我被如何生成签名难住了。一个简单的端到端示例会有很大帮助。链接的博客文章很有帮助，但并不完整。例如，“render_to_response”的定义不正确，在设置之前使用了变量“p”。一个完整的例子会很有帮助。谢谢你的回答和后端java的链接。您的代码简洁易懂。Cloudinary有一个名为“unsigned uploads”的功能，允许您在不进行服务器端签名的情况下执行此操作。 
<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>

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