BBS功能之Ajax上传图片

1. 先设置路由

url(r'^upload_img', upload_img),

2. 建立函数

def upload(request):
    return render(request,'upload.html')

3. 编写upload.html

//这次我们先学jquery方式

<body>
    <h1>上传图片</h1>
    <input type="file" name="fafafa">
    <input type="button" value="点我点我" onclik = "uploadImg()">
    <script src="/static/jquery-3.2.1.js"></script>     
    <script>
        function uploadImg() {


                }

            })
            
        }
    </script>
</body>

4. 运行一下页面

5. 继续编写 upload.html

<body>
    <h1>上传图片</h1>
    <input id="fafafa" type="file" name="fafafa">
    <input type="button" value="点我点我" onclik = "uploadImg()">
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        function uploadImg() {
            //获取文件
            //上传文件
            //预览
            var formData = new FormData();                   //data对象 上传的图片先给这个对象然后传递给data
            formData.append('a1',$('#fafafa')[0].files[0]); // 这就是取到的图片文件 固定格式
            console.log(formData);
            $ajax({
                url:'/upload_img/',
                type:'POST',
                data:formData,                                 //数据上传到后台
                prosessData:false,
                contentType:false,
                success:function (arg) {
                    console.log(arg)

                }

            })
            
        }
    </script>
</body>

6. 建立函数 upload_img

def upload_img(request):
    obj =  request.FILES.get('a1')
    print(obj)
    return HttpResponse('999')

7. 继续完善函数

def upload_img(request):
    obj =  request.FILES.get('a1')
    with open(obj.name,mode='wb') as f:
        for chunk in obj.chunks():
            f.write(chunk)
    return HttpResponse('999')