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. 

      

  • 相关阅读:
    限制字数输出,,超出的用...
    tablesorter 的使用
    二维数组根据某个特定字段排序
    对维数组排序 array_multisort()的应用
    多个字段关键字查询
    CASE WHEN用法
    type="submit" button的用法
    获取近30天的数据的时间方式
    练习题
    管理经济学第九章
  • 原文地址:https://www.cnblogs.com/lipingzong/p/7567508.html
Copyright © 2011-2022 走看看