用户从图像列表中选择的 Python/Django 表单

Posted 2023-02-24

【中文标题】用户从图像列表中选择的 Python/Django 表单

【英文标题】：Python/Django form where user selects from a list of Images

【发布时间】：2015-11-04 01:21:25

【问题描述】：

我是 django 的新手，我想制作一个表单，允许用户使用单选框选择三个图像中的一个，一旦用户选择图像，它就会保存到他们的个人资料并显示在他们的个人资料页面上。

我正在使用： django 1.8.3 用户 1.4.1

任何有帮助的帮助或文档链接都会很棒。

【问题讨论】：

尝试使用 django 形式来代表你的选择。 docs.djangoproject.com/en/1.8/topics/forms

是的，这就是我一直在做的事情，我可以制作表单和所有东西，但我无法在提交时将所选图像保存到用户个人资料中。

向您发布 forms.py 和 views.py 代码。你卡在哪里了？

这是一个完整的例子。 coderwall.com/p/bz0sng/…。但是你应该做一些自己的研究，更具体地了解你的问题。

我已经完成了自己的研究，并且我了解如何允许用户上传图片，我希望用户必须从我提供的一组图片中进行选择。

【参考方案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 了解如何设置正确的小部件。

【参考方案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

带有soem Jquery的JS：

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