Ajax Avatar Vorschau mit jQuery In Django

Question

Ich habe versucht, ein Tutorial zu folgen. Aber es will nicht für mich arbeiten. Ich versuche eine einfache (oder so dachte ich) Avatar-Vorschau zu bekommen. Das Problem ist, dass es nicht lädt oder den Avatar akzeptiert. Wenn ich noch ein paar Augen darauf bekommen könnte und mir vielleicht sagen würde, was ich falsch mache; Ich wäre sehr dankbar.

Die Vorlage: (die Form ist eine große Gesamtbenutzerinformationen Form)

<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" alt="" alt="sample-pic" /> 
      </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)... 

Die 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" alt="Uploading...."/>');    
      }, 
      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)) 

Edit: 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) 

Answer 1

Für die Zukunft Sie unabhängig Avatar als Modell mit seinen eigenen Feldern definieren sollte, wenn es ein Miniaturbild sein wird. Aber haben Sie es versucht

<img src="{% if profile.user %}{% thumbnail avatar 120x120 crop %}{% else %}{{ DEFAULT_AVATAR }}{% endif %}" id="thumb" alt="" alt="sample-pic" />