Question

在Cloudinary Django SDK documentation中，用于直接从浏览器上传，下面给出了direct_upload_complete视图的示例。

@csrf_exempt
def direct_upload_complete(request):
  form = PhotoDirectForm(request.POST)
  if form.is_valid():
    form.save()
    ret = dict(photo_id = form.instance.id)
  else:
    ret = dict(errors = form.errors)

  return HttpResponse(json.dumps(ret), content_type='application/json')

在此示例后立即显示已经存储了图像ID，现在您可以以显示其他Cloudinary托管图像的相同方式显示直接上传的图像：，并给出以下模板代码示例：

{% load cloudinary %}      
{% cloudinary photo.image format="jpg" width=120 height=80 crop="fill" %}

这个模板代码示例使我感到困惑，因为它根本与响应名称为ret的Django视图代码无关。文档的屏幕截图如下。

使用Javascript从名为ret的JSON对象创建变量并将其显示在模板页面上，我需要做什么？

下面是我在示例的upload_prompt.html模板上使用的Javascript。它工作正常，可以返回上传图像的缩略图以及一些图像上传后显示的Cloudinary数据（发生cloudinarydone事件）。

但是我也想获取上传的照片的Model ID，以使用ID创建指向该照片的链接。

我可以在下面的Javascript中从名为photo_id的JSON对象获取ret键值吗？

<script>
    $(function () {
        $('#direct_upload input[type="file"]')
        .cloudinary_fileupload({
            dropZone: '#direct_upload',
            start: function (e) {
                $('.status').text('Starting upload...');
            },
            progress: function (e, data) {
            // $('.status').text('Uploading...');
                $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");            
            },
            fail: function (e, data) {
            $(".status").text("Upload failed");
            }
        })
        .on('cloudinarydone', function (e, data) {
            $('.status').text('Updating backend...');
            $.post(this.form.action, $(this.form).serialize()).always(function (result, status, jqxhr) {
                $('.status').text(result.errors ? JSON.stringify(result.errors) : status);
            });
            var info = $('<div class="uploaded_info"/>');
            $(info).append($('<div class="image"/>').append(
                $.cloudinary.image(data.result.public_id, {
                    format: data.result.format, 
                    width: 150, 
                    height: 150, 
                    crop: "fill"
                })
            );               
            $(info).append($('<div/>').append('image/upload/' + data.result.path));
            $('.uploaded_info_holder').append(info);

        });
    });

</script>

Answer 1

感谢Cloudinary支持的Brian Luk，在模板的javascript photo_id请求回调中完成了POST值的获取。

也许有更好的方法来执行此操作，但是我只是创建了变量photoid，然后使用该变量来创建照片模型网址。

$.post(this.form.action, $(this.form)
    .serialize()).always(function (result, status, jqxhr) { 
    $('.status').text(result.errors ? JSON.stringify(result.errors) : status);
var photoid = JSON.stringify(result.photo_id);

$(info).append($('<div/>').append('<a href="/photo/' + photoid + '/">link</a>'));

Cloudinary直接上传文档示例不清楚

1 个答案: