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

我想用jQuery的Cloudinary图片上传API来上传图片。我不知道这件事。我正在使用下面的代码。我不知道我们在签名参数中使用了什么值。使用jQuery的Cloudinary API直接上传图片

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <title>Insert title here</title> 
     <script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
     <script src="js/jquery.ui.widget.js"></script> 
     <script src="js/jquery.iframe-transport.js"></script> 
     <script src="js/jquery.fileupload.js"></script> 
     <script src="js/jquery.cloudinary.js"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      $.cloudinary.config({"api_key":"api_key","cloud_name":"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": '', 
       "callback": "http//localhost/cloudinar/index.php?message='file  has been uploaded'", 
       "signature": "", 
       "api_key": "api_key" };  
       $('#uploadinput').attr('data-form-data', JSON.stringify(data)); 
     </script> 
    </body> 
</html>

来源

2016-05-13 Shahid Rafiq

Cloudinary的服务器端SDK支持自动生成一个自动包含相应签名的输入字段。欲了解更多的信息（例如，PHP）： http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser

来源

2016-05-14 00:21:23

我想确切地知道标题中所说的“直接图像上传...”，并且这个回答对于Cloundinary的文档是无法理解的。为什么我想要/需要生成一个输入字段，如果我已经有一个？为什么不能将代码连接到已经存在的元素，只需要用3-5行代码将数据发送到服务器？包括5个js脚本这样简单的东西似乎很疯狂。 – vsync

服务器端代码可以通过一行代码来简化。但是，您确实也可以让Cloudinary使用您已添加的输入字段。请注意，'data-form-data'的动态JavaScript添加不会像您共享的示例中那样工作。它可以以不同的方式完成。请参阅 - https://support.cloudinary.com/hc/en-us/articles/202519952-Why-is-updating-a-cloudinary-fileupload-field-dynamically-not-working- –

与支持交谈后我被引导到this post，它展示了如何直接将文件上传到Cloudinary，越简单越好，以“unsigned”的方法：

$('.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”的人给了demo page，他回答我的支持邮件。

来源

2016-07-28 09:30:32 vsync

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

回答

相关问题