使用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直接上傳圖片

回答

相關問題