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


Direct image upload using Cloudinary API using jQuery

我正在尝试使用jQuery使用Cloudinary图片上传API上传图片。我对此一无所知。我正在使用以下代码。
而且我不知道我们在签名参数中使用什么值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        Insert title here
        <script src="http://code.jquery.com/jquery-1.9.0.js">
        <script src="js/jquery.ui.widget.js">
        <script src="js/jquery.iframe-transport.js">
        <script src="js/jquery.fileupload.js">
        <script src="js/jquery.cloudinary.js">
    </head>
    <body>
        <script type="text/javascript">
            $.cloudinary.config({"api_key":"api_key","cloud_name":"cloud_name"});
         
        <input name="file" type="file" id="uploadinput"
            class="cloudinary-fileupload" data-cloudinary-field="image_upload"
            data-form-data=""></input>
       
            var data = {"timestamp":  '',
             "callback":"http//localhost/cloudinar/index.php?message='file     has been uploaded'",
             "signature":"",
             "api_key":"api_key" };    
              $('#uploadinput').attr('data-form-data', JSON.stringify(data));
       
    </body>
</html>

在与支持人员交谈之后，我被引导到这篇文章，该文章展示了如何使用"无符号"方法尽可能简单地将文件直接上传到Cloudinary：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.upload_field').unsigned_cloudinary_upload("zcudy0uz",
    { cloud_name:'demo', tags:'browser_uploads' },
    { multiple:true }
)
.on('cloudinarydone', function(e, data){
    var opts = {
        format  : 'jpg',
        width   : 150,
        height  : 100,
        crop    : 'thumb',
        gravity : 'face',
        effect  : 'saturation:50'
    };

    $('.thumbnails').append( $.cloudinary.image(data.result.public_id, opts) )
})
.on('cloudinaryprogress', function(e, data){
    var W = Math.round((data.loaded * 100.0) / data.total) // %
    $('.progress_bar').css('width', W + '%');
});

一个名为" Maor Gariv"的人也给了我一个演示页面，该人回答了我的支持电子邮件。

Cloudinary的服务器端SDK支持自动生成一个输入字段，该字段自动包含相应的签名。
有关更多信息(例如，使用PHP)：
http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser

相关讨论