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

【问题标题】：How to use jquery of cloudinary to display success message如何使用cloudinary的jquery显示成功信息
【发布时间】：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。但是这个版本已经被弃用了

标签： javascript jquery cloudinary

【解决方案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 对象，详细说明了触发事件。

【讨论】：