How to use Cloudinary jQuery plugin to upload imag

Beginner's question here.

I'm trying to upload the photo from a webpage directly to cloudinary.

Here is the jQuery plugin that Cloudinary recommends to use.

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.

Can somebody point me to the right direction in terms of what "example.html" should look like?

Thanks.

标签： jquery-plugins cloudinary

3条回答

可以哭但决不认输i

2楼-- · 2020-06-18 03:52

Download the Jquery SDK and the server sdk.

Here is the code with a java server side :

Generating the signature on server side :

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);%>

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.

The HTML and 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>

Put the cloudinary_cors.html on your host and modify the path on the html. Set your APIKEY and your cloud name.

<%= timestamp %> and <%= expected_signature %> are the element calculate on java. ( You can do the same on php).

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.

0人赞添加讨论(0) 举报

狗以群分

3楼-- · 2020-06-18 04:02

Please see the recently published blog post that covers direct uploading from the browser to Cloudinary using jQuery: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

0人赞添加讨论(0) 举报

闹够了就滚

4楼-- · 2020-06-18 04:09

You cannot upload images to Cloudinary just by using plain html. You'll need a server that signs your request params. So,here is your example.html file:

<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>

Note: The signedData in data-form-data attribute is a JSONObject generated by a server-side code which includes a sha1Hex signature of your request parameters.

An example of that would look like:

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

Also, let me make you clear that you don't need any other buttons to upload the file, just choosing the file would trigger the jQuery event and send the request parameters to Cloudinary.

You can find about generating signature on java here.

0人赞添加讨论(0) 举报