Django ajax 上传图片

素材狗 2022-01-01 23:06:26 文章分类：前端问题点击数：次

文章标签

Django ajax upload image(Django ajax 上传图片)

本文介绍了Django ajax 上传图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试使用没有 django 表单的 Ajax 上传图片.

I try to upload image, using Ajax without django forms.

它不返回错误.一切正常，它保存在数据库名称"和描述"中但不保存图像":(

It not return errors. Everything it's ok, it save in database "name" and "description" but not save "image" :(

我的代码:

views.py

def add(request):
articles = Article.objects.all()
if request.method == 'POST':
     if request.is_ajax():
        name = request.POST.get('name')
        description = request.POST.get('description')
        icon = request.FILES.get('icon')
        article_new = Article(
            name=name,
            description=description,
            icon=icon
        )
        article_new.save()

return render_to_response('home.html', {'articles':articles}, context_instance=RequestContext(request))

models.py

 class Article(models.Model):
    name = models.CharField(max_length=100, null=True, blank=True)
    description = models.TextField()
    icon = ThumbnailerImageField(upload_to='uploads')

html

 <form  method="POST"  enctype="multipart/form-data">
  {% csrf_token %}
      <input type="text" id="inputName">
      <input type="text" id="inputDescription">
      <input type="file" id="inputFile">
      <button id="submit"  type="submit">Add</button>
  </form>

javascript

 //For doing AJAX post
 $("#submit").click(function(e) {
    e.preventDefault();
    var name = $('#inputName').val();  
    var description = $('#inputDescription').val();
    var icon = $('#inputFile').val();


//This is the Ajax post.Observe carefully. It is nothing but details of where_to_post,what_to_post
$.ajax({
    url : "/add", // the endpoint,commonly same url
    type : "POST", // http method
    data : { csrfmiddlewaretoken : csrftoken,
    name : name,
    description : description,
    icon: icon
    }, // data sent with the post request
        // handle a successful response
        success : function(json) {
        console.log(json); // another sanity check
        },
        // handle a non-successful response
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
});