cloudinary直接上传表单无效，需要重新上传

Question

我正在使用 django 和 cloudinary 直接上传来上传 iamges 如果表单有效，它就可以工作。

但如果我的表单无效，我的页面会重新加载，然后表单会要求用户再次上传图片。

有什么办法解决这个问题？

---

我的代码附在下面。 因为我使用直接上传，所以在上传图片后。它将立即显示在前端。 但是当表单无效并刷新表单时，图像就消失了。 （在你最新的更新之后，确实我不需要重新上传照片了。但是照片不见了。如何再次显示？）

谢谢。

    <script>
        $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {
            var imag_var = $.cloudinary.image(data.result.public_id, {
                format : data.result.format,
                version : data.result.version,
                transformation : 'form_preview'
            });
            $('.preview').html(imag_var);
            $('.status_value').text('Uploaded:' + data.result.public_id);
            $('#id_cover_image').val(data.result.public_id);
            return true;
        });
        $('.cloudinary-fileupload').bind('fileuploadprogress', function(e, data) {
            $('.progress').attr({
                style : "visibility:show",
            });
            $('.status_value').text('Uploading...');
        });
    </script>

Answer 1

Cloudinary javascript 插件将预加载的资源 URI 放在隐藏字段中。 见here。

从上面可以看出，如果该字段已经存在，则 javascript 插件将填充它。否则，它将创建它。

为了在无效的表单提交中保留该 URI，您应该根据您为 cloudinary_direct_upload_field 指定的字段名称创建一个隐藏字段，并使用来自失败提交的值进行填充。

解决此问题的另一种方法是使用 AJAX 调用提交表单。这样，即使验证失败并且可以重新提交，页面上的数据也会保留。请参阅here 了解如何完成此操作的示例。

编辑：

Cloudinary Python 客户端库的 1.0.12 版现在会在需要时添加隐藏字段，以便重新提交可以正常工作。请参阅change log。

编辑 2：

为了在表单验证错误的情况下重新生成预览图像，您可以在页面加载时运行的 javascript 代码中添加类似这样的内容（假设表单中的字段名称为“image”）：

//If form validation failed have the posted preloaded URI from the earlier
//submission so we can show preview
//pull the value from the hidden field
var imageUri = $('#direct_upload input[name="image"]').val();
//preloaded image URI structure
//{resource_type}/{type}/v{version}/{filename}#{signature}
var regex = /^([^\/]+)\/([^\/]+)\/v(\d+)\/([^#]+)#([^\/]+)$/;
//if there is value and it matches the pattern:
if (imageUri && regex.test(imageUri)) {
  var uriParts = regex.exec(imageUri);
  var version = uriParts[3];
  var filename = uriParts[4];
  //reconstruct a viable source
  var src = "v" + version + "/" + filename;
  //generate a cloudinary image tag and add it to the 'preview' div
  $(".preview").append(
    $.cloudinary.image(src, {
      transformation: "form_preview" //your named transformation
    })
  );
}