我是 django 的新手,想要制作一个表单,允许用户使用单选框选择三个图像之一,一旦用户选择图像,它就会保存到他们的个人资料并显示在他们的个人资料页面上。
我正在使用:django 1.8.3 userena 1.4.1
任何有帮助的帮助或文档链接都会很棒。
我是 django 的新手,想要制作一个表单,允许用户使用单选框选择三个图像之一,一旦用户选择图像,它就会保存到他们的个人资料并显示在他们的个人资料页面上。
我正在使用:django 1.8.3 userena 1.4.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='')
形式:
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')
带有 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");
}
实际上可以在文档中建立另一个简单的示例
如果图像集很小且固定,最好的选择是使用定义模型中图像的字段中的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 文档所说
但是,如果您发现自己的黑客选择是动态的,那么最好使用带有 ForeignKey 的适当数据库表
要指定用于表单字段的单选按钮,请参阅官方文档以了解如何设置正确的小部件。