如何使用Cloudinary jQuery插件直接从页面上传图像? [英] How to use Cloudinary jQuery plugin to upload images directly from a page?
问题描述
这里是初学者的问题.
我正在尝试将照片从网页直接上传到 cloudinary .
I'm trying to upload the photo from a webpage directly to cloudinary.
此处是Cloudinary建议使用的jQuery插件.
Here is the jQuery plugin that Cloudinary recommends to use.
很遗憾，该插件尚未记录，并且没有清晰的"example.html"文件. 我试图弄清楚插件代码，但到目前为止没有成功.
Unfortunately the plugin is not documented yet, and doesn't have a clear "example.html" file. I've tried to get my head around the plugin code, but with no success so far.
有人可以在"example.html"的外观方面为我指明正确的方向吗?
Can somebody point me to the right direction in terms of what "example.html" should look like?
谢谢.
推荐答案
下载Jquery SDK 和服务器sdk.
Download the Jquery SDK and the server sdk.
以下是带有Java服务器端的代码:
Here is the code with a java server side :
这是java中的JSP代码:
Here is the JSP code in java :
<%@ 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中.我在回调和时间戳上签名.
You can have the CLOUDINARY_URL on your Cloudinary Dashboard. I use the cloudinary.apiSignRequest method wich is include in server cloudinary sdk. I sign the callback and the timestamp.
<!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和您的云名称.
Put the cloudinary_cors.html on your host and modify the path on the html. Set your APIKEY and your cloud name.
<％=时间戳％>和<％= Expected_signature％>是在Java上计算的元素. (您可以在php上做同样的事情.)
<%= timestamp %> and <%= expected_signature %> are the element calculate on java. ( You can do the same on php).
我在我的网站上使用此代码 http://paint.mcbjam.com 您在此处有更多详细信息: http://mcbjam.blogspot .fr/2013/05/integrer-cloudinary-pour-realiser-des.html 法语.
I use this code on my website here http://paint.mcbjam.com You have more details here : http://mcbjam.blogspot.fr/2013/05/integrer-cloudinary-pour-realiser-des.html in French.
这篇关于如何使用Cloudinary jQuery插件直接从页面上传图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
