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 }) ); }

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

1 个答案: