zoukankan      html  css  js  c++  java
  • 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')
    

    8. 

      

  • 相关阅读:
    PAT乙级-1037. 在霍格沃茨找零钱(20)
    PAT乙级-1041. 考试座位号(15)
    PAT乙级-1047. 编程团体赛(20)
    css3 实现 背景图片显示
    块级元素与行内元素(内联元素)的区别和联系
    JS变量
    导航条菜单的制作 滑动缓慢
    HTML中Id和Name的区别
    全面理解Javascript中Function对象的属性和方法
    理解盒子模型
  • 原文地址:https://www.cnblogs.com/lipingzong/p/7567508.html
Copyright © 2011-2022 走看看