在 django 中使用 jQuery 预览 Ajax 头像

Posted 2023-02-24

【中文标题】在 django 中使用 jQuery 预览 Ajax 头像

【英文标题】：Ajax avatar preview with jQuery In django

【发布时间】：2012-04-19 13:42:39

【问题描述】：

我一直在尝试学习教程。但它不想为我工作。我正在尝试显示一个简单的（或者我认为是这样的）头像预览。问题是它不会加载或接受头像。如果我能对此有另一种看法，也许可以告诉我我做错了什么；我会非常感激。

模板：（表格为整体用户信息大表格）

<form class="inline" enctype="multipart/form-data" method="POST" action="/profile/edit/ role /" id="avatarLoadForm">
     <input type="hidden" name="next" value="/account/settings/">
     % csrf_token %
     % if user_info_form.errors % user_info_form.errors % endif %
     <div>
          <label class="form-label" for="id_avatar">Your Picture</label>
          <div id="preview" class="inline-block img-frame thick">   
               <img src="% if profile.avatar %% thumbnail profile.avatar 120x120 crop %% else % DEFAULT_AVATAR % endif %" id="thumb"   />
          </div>
           user_info_form.avatar 
     </div>
     <div id="edit-name">
          <label class="form-label" for="id_first_name">Name</label>
           user_info_form.first_name 
           user_info_form.last_name 
 ... And so on (other info not relevant)...

js：

(function() 
        var thumb = $('img#thumb');    
        new AjaxUpload('imageUpload', 
            action: $('#avatarLoadForm').attr('action'),
            name: 'avatar',

            onSubmit: function(file, extension) 
                $("#preview").html('<img id="loader" src=" STATIC_URL images/ajax-loader.gif" />');            
            ,
            onComplete: function(file, response) 
                thumb.load(function()
                    $("#preview").html('');
                    thumb.unbind();
                );
                thumb.attr('src', response);
            
        );

Views.py

@login_required        
def edit_profile(request, profile_type):
    if profile_type == 'investor':
        profile = InvestorProfile.objects.get(user=request.user)
    elif profile_type == 'manager':
        profile = ManagerProfile.objects.get(user=request.user)
    context = base_context(request)
    if request.method == 'POST':
        notify = "You have successfully updated your profile."
        user_info_form = UserInfoForm(request.POST, request.FILES)
        if user_info_form.is_valid():
            user_info_form.save(request.user, profile_type)
            response = simplejson.dumps("status": "Upload Success")
        return HttpResponse (response, mimetype='application/json')
    else:
        initial = 
        initial['first_name'] = request.user.first_name
        initial['last_name'] = request.user.last_name
        initial['email'] = request.user.email
        initial['about'] = profile.about
        initial['country'] = profile.country
        initial['about'] = profile.about
        user_info_form = UserInfoForm(initial=initial)
    context['user_info_form'] = user_info_form
    context['profile_type'] = profile_type
    context['profile'] = profile
    return render_to_response('settings/base.html', context, context_instance=RequestContext(request))

编辑： Forms.py：

class UserInfoForm(forms.Form):
    first_name = forms.CharField(widget=forms.TextInput(attrs='class':'input-text'), max_length=30)
    last_name = forms.CharField(widget=forms.TextInput(attrs='class':'input-text'), max_length=30)
    email = forms.EmailField(widget=forms.TextInput(attrs='class':'input-text'))
    about = forms.CharField(widget=forms.Textarea(attrs='class':'input-text'), required=False)
    country = forms.CharField(max_length=50, widget=forms.Select(choices=countries.COUNTRIES))
    avatar = forms.ImageField(required=False)
    #avatar = forms.ImageField(widget=forms.ClearableFileInput(attrs='id':'imageUpload'),required=False)
    investor_type = forms.CharField(max_length=4, widget=forms.Select(choices=choices), required=False)

【问题讨论】：

你能展示你的 forms.py 模块吗？

检查页面的 HTML 源代码。图片真的在里面吗？图片的网址是什么？我看到您正在使用缩略图，可能是缩略图生成出错了。

@FrantzdyRomain 添加了表格（抱歉，过了这么久，复活节到了。）

很酷。我建议看看 django-profiles 看看他们是如何实现他们的：D

【参考方案1】：

为了将来的参考，您应该将 Avatar 定义为具有自己的字段的模型，无论它是否是缩略图。但是你试过了吗

 <img src="% if profile.user %% thumbnail avatar 120x120 crop %% else % DEFAULT_AVATAR % endif %" id="thumb"   />