码迷,mamicode.com
首页 > Web开发 > 详细

BBS功能之Ajax上传图片

时间:2017-09-21 13:44:33      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:tty   response   img   func   后台   技术分享   fun   app   file   

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‘)

8. 

 

  

 

BBS功能之Ajax上传图片

标签:tty   response   img   func   后台   技术分享   fun   app   file   

原文地址:http://www.cnblogs.com/lipingzong/p/7567508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!