title: django - any image upload and display method using Ajax?
body: <p>On my django application I'm using ImageKit to resize a image loaded to the server.</p>
  
  <p><strong>models.py</strong></p>
  
  <pre><code>class Pictures(ImageModel):
      user = models.ForeignKey(User)
      original_image = models.ImageField(upload_to='userpx')
  
      class IKOptions:
          # This inner class is where we define the ImageKit options for the model
          spec_module = 'userprofile.specs'
          cache_dir = 'modpics'
          image_field = 'original_image'
          save_count_as = 'num_views'
      def __unicode__(self):
          return u'%s' % (self.original_image)
  </code></pre>
  
  <p><strong>forms.py</strong></p>
  
  <pre><code>class PicturesForm(forms.Form): 
     image = forms.ImageField()
  </code></pre>
  
  <p><strong>template.html</strong></p>
  
  <pre><code>&lt;img src="{{ p.thumbnail_image.url }}" &gt;
  
  &lt;form action="" method="POST" class="cmxform" enctype="multipart/form-data"&gt;
  {% csrf_token %}
  {{aform.as_p}}
  &lt;input type="submit" value="submit" name="picture_button" /&gt;        
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>   if 'picture_button' in request.POST:
          aform = PicturesForm(request.POST, request.FILES)
          if aform.is_valid():
              # an UploadedFile object
              a_user = User.objects.get(id=request.user.id)
  
              #Check if image entry exists 
              try:
                  p = Pictures.objects.get(user=request.user.id)
  
              except Pictures.DoesNotExist: 
                  picture = Pictures.objects.create(user = a_user)
                  image_file = request.FILES['image']
                  picture.original_image.save(image_file.name, image_file)
  
                  #show picture and form
                  p = Pictures.objects.get(user=request.user.id)
                  aform = PicturesForm()
  
              else:
                  p.delete()
                  picture = Pictures.objects.create(user = a_user)
                  image_file = request.FILES['image']
                  picture.original_image.save(image_file.name, image_file)
  
                  #show image and form
                  p = Pictures.objects.get(user=request.user.id)
                  aform = PicturesForm()
  
  
      else:
          p = Pictures.objects.get(user=request.user.id)
          aform = PicturesForm()
  </code></pre>
  
  <p><code>Using some Ajax method</code> how can I eliminate the submit button in the <code>template.html</code> so when the user selects the image from his/her machine, the image automatically gets uploaded to the server and then displayed back to the server? </p>
  
  <p>I appreciate your help! </p>