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

Question

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

Я использую: Джанго 1.8.3 userena 1.4.1

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

Answer 1

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

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

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 as your model field

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

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

Однако, как Django документы говорят

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

Чтобы указать Радиобуты, которые будут использоваться для поля формы, см. В разделе official docs о том, как установить соответствующий виджет.

Answer 2

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

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 с SOEM 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"); 
} 

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