django-Ajax实现上传图片(原生JS以及jQuery写法)

1.原生实现上传

//首先new一个XMLRequest对象
xml=new XMLHttpRequest();
//上传路径以及提交方式,true表示以异步方式发送数据
xml.open(‘post’,’/upload.html’,true);
//发送数据
xml.send(“k1=v1;k2=v2;”);

2.jQuery实现

$.ajax({
url:’/upload.html’,
data:{‘k1’:‘v1’,‘k2’:‘v2’}
})；

3.FormData对象(相当于一个字典,不仅仅可以承载字符串,还能承载文件)

dict=new FormData();
//生成一个键值对
dict.append(‘k1’,‘v1’);
//发送文件
dict.append(‘k2’,文件对象);
xml.send(dict);

后台代码实例:

import os
def upload(request):
    if request.method=="GET":
        img_list=models.Img.objects.all()
        return render(request,'upload.html',{'img_list':img_list})
    elif request.method=="POST":
        user = request.POST.get('user')
        fafafa = request.POST.get('fafafa')
        obj = request.FILES.get('fafafa')

        file_path = os.path.join('static', 'upload', obj.name)
        f = open(file_path, 'wb')
        for chunk in obj.chunks():
            f.write(chunk)
        f.close()

        models.Img.objects.create(path=file_path)
        # return redirect('/upload.html')
        ret={'status':True,'path':file_path}
        import json
        return HttpResponse(json.dumps(ret))

前端代码实例(包括原生js,jQuery):

    
    
    







    {% for img in img_list %}
        
    {% endfor %}

PS：本人小白一个大神绕道