Форма Python/Django, где пользователь выбирает из списка изображений

Question

Я новичок в django и хочу создать форму, которая позволит пользователю выбирать одно из трех изображений с помощью переключателей, как только пользователь выберет изображение, оно будет сохранено в его профиле и отображено на странице его профиля.

Я использую: django 1.8.3 userena 1.4.1

Любая помощь или ссылки на документацию, которая поможет, будет отличной.

Answer 1

Основной пример. Модели:

def get_upload(instance, filename):
    return "uploaded_files/user_%s_%s_%s" % (instance.user, datetime.datetime.today().strftime("%d-%m-%Y %H-%M-%S"), filename)

class UserModel():
    # your fields
    image = models.FileField(upload_to=get_upload, default='')

FileField

Формы:

class UploadForm(forms.ModelForm):
    """Auxiliary class to make file uploading more convenient."""
    def __init__(self, *args, **kwargs):
        super(UploadForm, self).__init__(*args, **kwargs)

    class Meta:
        model = UserModel
        fields = ('image')

Посмотреть:

def upload(request):
    if request.method == "POST":
        profile = request.user.profile
        image_type = request.POST.get("image_type", None)
        if image_type == "blah":
            profile.image = request.FILES[image_type]
        else:
            return HttpResponse("Error")
        request.user.profile.save()
        return HttpResponse('OK')

request.FILES

JS с соем Jquery:

var SIZE_RESTRICT = 10*1024*1024;       //10 Mbytes

$(document).ready(function()
{
    $(".upload_file").find(".upload_button").click(send_file);
    $(".upload_file").find(".upload_file_form").find("input[type='file']").click(enable_upload);
});

function send_file()
{
    if ($(this).attr("enabled") != "true") return;
    // Prevent double-triple clicks with multiple upload.
    $(this).attr("enabled", "false");
    var form = $(this).parent().find(".upload_file_form").get(0);
    var formData = new FormData(form);
    var file = $(form).find("input[type='file']").get(0).files[0];
    // Not sure about this
    // Prevent attack with HUGE files, that will smash server memory
    // TODO: Restrict file types (Ex. MIME-image, pdf, doc)
    if (file.size > SIZE_RESTRICT)
    {
        alert("File is too big.");
        return;
    }
    formData.append("proof_type", $(this).attr("upload-type"));
    var xhr = new XMLHttpRequest();
    var that = this;
    // TODO: Define another events like error, abort
    xhr.upload.onprogress = function(e) {
        // TODO: Progressbar as e.loaded / e.total
        if (e.lengthComputable)
            console.log((e.loaded / e.total) * 100);
        else
            console.log("Cant count length");
      };

    xhr.onload = function(e){
          // TODO: Show success confirmation to user.
        if (this.response == "Success")
        {
            // pass
            alert(this.response);
        }
        else if (this.response == "Error")
        {
            // pass
            alert(this.response);
        }
        else
        {
            // pass
        }
      };

    xhr.open('POST', '/upload_proof');
    xhr.send(formData);
}

function enable_upload()
{
    $(this).parent().parent().find(".upload_button").attr("enabled", "true");
}

На самом деле еще один простой пример может быть найден в документах

Answer 2

Если набор изображений небольшой и фиксированный, лучшим вариантом является использование choice атрибут в поле, которое определяет изображение в вашей модели.

Поле изображения может быть путем к файлу изображения в файловой системе.

class UserProfile(models.Model):
    GOOD = 'Good.jpg'
    UGLY = 'Ugly.jpg'
    BAD = 'Bad.jpg'
    AVATAR_CHOICES = (
        (GOOD, 'Good'),
        (UGLY, 'Ugly'),
        (BAD, 'Bad'),
    )
    avatar_img = models.CharField(max_length=255,
                                  choices=AVATAR_CHOICES,
                                  default=GOOD)

Другой вариант заключается в использовании FilePathField как ваше модельное поле

FilePathField(path="/path/to/avatar_images", match="*.jpg", recursive=False)

Другой способ - заполнить поле формы динамически при создании экземпляра формы. Пожалуйста, смотрите этот SO QA для получения дополнительной информации об этом.

Однако, как говорят Django Docs

Но если вы обнаружите, что выбор хака будет динамичным, вам, вероятно, лучше использовать правильную таблицу базы данных с ForeignKey

Чтобы указать радиокнопки, которые будут использоваться для поля формы, обратитесь к официальным документам о том, как установить правильный виджет.