34)django-上传文件,图片预览功能实现

一：ajax原生实现上传

#ajax原生实现上传
    #urls.py
    url(r'^upload/$',views.upload),
    url(r'^upload_file/$',views.upload_file),

    #upload.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .upload{
                display: inline-block;padding: 10px;
                background-color: brown;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                z-index: 90;
            }
            .file{
                width: 100px;height: 50px;opacity: 0;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                z-index: 100;
            }
        </style>
    </head>
    <body>
        <div style="position: relative;width: 100px;height: 50px;">
            <input class="file" type="file" id="fafafa" name="afafaf" />
            <a class="upload">上传</a>
        </div>
        <input type="button" value="提交XHR" onclick="uploadXHR();">
    
        <script>
            //使用原生ajax实现上传
            function uploadXHR(){
                //首先获取值
                //$("#fafafa")[0]==document.getElementById("fafafa")
                //files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
                var file_obj=document.getElementById("fafafa").files[0]
                //这里file_obj是对象，send发送的是字符串，所以不能直接发送
                var formdata=new FormData();//FormData表示是一个form表单
                formdata.append("username","root");//key ,value
                formdata.append("fafafa",file_obj);//可以加对象
    
                //设置原生ajax对象
                var xhr= new XMLHttpRequest()
                xhr.open("POST","/upload_file/",true);
                //回调函数，当状态变化时触发
                xhr.onreadystatechange=function(){
                    //4是表示所有数据接受完了
                    if (xhr.readyState==4){
                        //获取返回值
                        console.log(xhr.responseText) //返回的是字符串
                        //转对象
                        JSON.parse(xhr.responseText)
                    }
    
                }
                //上传文件不需要设置请求头
                xhr.send(formdata);//发送的数据只能是字符串
    
            }
        </script>
    </body>
    </html>

    #views.py
    def upload_file(request):
        username=request.POST.get("username")
        file_obj=request.FILES.get("fafafa")
        print(username,file_obj)
        with open(file_obj.name,'wb') as f:
            for item in file_obj.chunks():
                f.write(item)
        ret={"status":False,"data":request.POST.get("username")}
        return HttpResponse(json.dumps(ret))
View Code
目录

一：ajax原生实现上传
