0

私はdjangoとcloudinaryの直接アップロードを使用して画像をアップロードしていますが、フォームが有効であれば機能しています。

ただし、フォームが有効でない場合、ページがリロードされ、フォームはユーザーに画像を再度アップロードするように求めます。

これを解決する方法はありますか？

私のコードは以下に添付されています。画像がアップロードされた後、直接アップロードを使用するため。フロントエンドにすぐに表示されます。しかし、フォームが無効でフォームが更新されると、画像が消えてしまいます。（最新の更新後、写真を再度アップロードする必要はないのは事実ですが、写真は消えています。それを再度表示するにはどうすればよいですか？）

ありがとう。

    <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>
4

1 に答える 1

1

Cloudinary JavaScript プラグインは、プリロードされたリソース URI を隠しフィールドに配置します。ここを参照してください。

上記から、フィールドがすでに存在する場合、javascript プラグインがそのフィールドにデータを入力することがわかります。それ以外の場合は、それを作成します。

無効なフォーム送信でその URI を保持するには、cloudinary_direct_upload_field に指定したフィールド名に従って名前が付けられ、失敗した送信からの値が入力される隠しフィールドを作成する必要があります。

この問題を回避する別の方法は、AJAX 呼び出しを使用してフォームを送信することです。これにより、検証が失敗した場合でもページ上のデータが保持され、再送信が可能になります。これを行う方法の例については、こちらを参照してください。

編集：

Cloudinary Python クライアント ライブラリのバージョン 1.0.12 では、再送信が機能するように、必要に応じて隠しフィールドが追加されるようになりました。変更ログを参照してください。

編集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
    })
  );
}
于 2013-10-30T07:00:53.680 に答える