如何使用cloudinary的jquery显示成功信息

Posted 2023-03-25

【中文标题】如何使用cloudinary的jquery显示成功信息

【英文标题】：How to use jquery of cloudinary to display success message

【发布时间】：2018-09-03 01:08:12

【问题描述】：

我正在使用 cloudinary Upload 小部件来上传多张图片。我将图像上传到 cloudinary 成功，但处理完成后无法显示成功消息。我使用以下 javascript 上传多张图像。

 <script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

<script type="text/javascript">
    document.getElementById("upload_widget_opener").addEventListener("click", function() 
        cloudinary.openUploadWidget( cloud_name: 'shreeya', upload_preset: 'album_widget', tags: ' uploadTag '  ,
            function(error, result)  console.log(error, result) );
    , false);
</script>

在文档中，给出了如何在上传过程完成后显示成功消息。文档中给出的如何显示成功的代码如下

$(document).on('cloudinarywidgetsuccess', function(e, data)

 
  console.log("Global success", e, data);
);

现在，我需要帮助如何在图像上传过程完成后使用此 jquery 代码显示消息。

【问题讨论】：

文档中哪里提到了“cloudinarywidgetsuccess”事件？

在当前版本的文档中缺少它。您可以在此链接cloudinary.com/documentation/upload_widget_1 上找到。此事件有一个单独的标题，命名为cloudinarywidgetsuccess - Global success event binding。但是这个版本已经被弃用了

【参考方案1】：

根据 cloudinary 的文档仅在您的问题中，您可以使用以下内容：

<!-- Just make the placeholder for message (anywhere on the necessary place in the document)-->
<!-- like -->
<span id="fileResponce"></span>

那么就可以使用cloudinary提供的同一个事件了：

$(document).on('cloudinarywidgetsuccess', function(e, data) 
    $('#fileResponce').text('Files uploaded successfully..!'); //and append the message in the placeholder span
);

【讨论】：

请您在下面看到我的回答，您可以看到我为获得成功消息所做的工作。图片上传后还是没有收到成功消息

【参考方案2】：

您已经设置了文件上传时的事件侦听器。就是这一行：

function(error, result)  console.log(error, result) 

你只需要扩展它来检查result是什么

document.getElementById("upload_widget_opener").addEventListener("click", function() 
    cloudinary.openUploadWidget( 
        cloud_name: 'shreeya', 
        upload_preset: 'album_widget', 
        tags: ' uploadTag '  
    ,
    function(error, result)        
        if (result && result.event === 'success') 
            console.log("Global success", result);
        

        if (error) 
            console.log("Error", error);
        
    
    );
, false);

见： https://cloudinary.com/documentation/upload_widget#cloudinary_createuploadwidget_options_resultcallback

cloudinary.createUploadWidget(options, resultCallback)

resultCallback 是一个用于事件处理的可选函数。这 回调方法具有以下签名function(error, result) 其中error 是null（如果成功）或错误消息（如果存在） 失败，而 result 是一个 JSON 对象，详细说明了触发 事件。