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

目录

　文件上传
   　　 1）form表单提交上传（会刷新）
    　　2）ajax上传
    　　3）iframe
    　　4)图片上传预览（思路保存文件的时候，把文件保存文件的路径反馈回，客户端直接访问图片地址）


     原生ajax和ajax,这两个都依赖于FormData对象，但是底板浏览器不支持。
   　　 iframe都支持(大部份网站都采用这种方式，什么版本浏览器都支持。


    时机：
        如果发送的是文件-->iframe,jquery,(formdata),XMLHTTPReuqest(Formdata)
        考虑浏览器版本兼容，推荐iframe方式。

一：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{
                 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; 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 jquery实现上传

##ajax jquery实现上传

    #upload.html
    <div style="position: relative; 100px;height: 50px;">
        <input class="file" type="file" id="fafafa" name="afafaf" />
        <a class="upload">上传</a>
    </div>
    <input type="button" value="提交jqury" onclick="uploadJquery();">

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        //jqury实现上传
        function uploadJquery(){
             //首先获取值
            //$("#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);//可以加对象,可以被send发送

            $.ajax({
                url: '/upload_file/',
                type: 'POST',
                data: formdata,
                processData: false,  // tell jQuery not to process the data上传文件要设置
                contentType: false,  // tell jQuery not to set contentType上传文件要设置
                success:function(arg,a1,a2){
                    console.log(arg);
                    console.log(a1);
                    console.log(a2);
                }
            })
        }
View Code

三：iframe实现上传

##iframe实现上传
    
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" />
        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
    </form>
    <script>
         //使用iframe实现上传
        function iframeSubmit(){
            $("#ifm1").load(
                    function(){
                        //因为iframe里面有document,所以获取下面的元素先用contains.
                        var content=$('#ifm1').contents().find('body').text();
                        console.log(content);
                    }
            )}
    <script>

    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

四：上面3种完整示例

##上面3种完整示例
    #urls.py
    url(r'^upload/$',views.upload),
    url(r'^upload_file/$',views.upload_file),

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

    #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{
                 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; 100px;height: 50px;">
            <input class="file" type="file" id="fafafa" name="afafaf" />
            <a class="upload">上传</a>
        </div>
        <input type="button" value="提交XHR" onclick="uploadXHR();">
        <input type="button" value="提交jqury" onclick="uploadJquery();">
    
    
        <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
            <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
            <input type="file" name="fafafa" />
            <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
        </form>
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
            //jqury实现上传
            function uploadJquery(){
                 //首先获取值
                //$("#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);//可以加对象,可以被send发送
    
                $.ajax({
                    url: '/upload_file/',
                    type: 'POST',
                    data: formdata,
                    processData: false,  // tell jQuery not to process the data上传文件要设置
                    contentType: false,  // tell jQuery not to set contentType上传文件要设置
                    success:function(arg,a1,a2){
                        console.log(arg);
                        console.log(a1);
                        console.log(a2);
                    }
                })
            }
    
            //使用原生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);//发送的数据只能是字符串
    
            }
    
             //使用iframe实现上传
            function iframeSubmit(){
                $("#ifm1").load(
                        function(){
                            //因为iframe里面有document,所以获取下面的元素先用contains.
                            var content=$('#ifm1').contents().find('body').text();
                            console.log(content);
                        }
                )}
        </script>
    </body>
    </html>
View Code

五：预览图片功能实现

##图片预览
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" />
        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
    </form>
    <!--用来图片预览显示-->
    <div id="preview"></div>



    //使用iframe实现上传
    function iframeSubmit(){
        $("#ifm1").load(
                function(){
                    //因为iframe里面有document,所以获取下面的元素先用contains.
                    var content=$('#ifm1').contents().find('body').text();
                    var obj=JSON.parse(content);

                    $("#preview").empty();//如果里面有标签先清空
                    var imgTag=document.createElement("img");
                    imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/"
                    $("#preview").append(imgTag);

                }
        )}

##图片预览改进（不点提交，给input file绑定onchange()事件，一改变就提交表单）
    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" onchange="ChangeFile();"/>
    </form>
    <!--用来图片预览显示-->
    <div id="preview"></div>

    <script>
            function ChangeFile(){
            //先给iframe绑定load事件
             $("#ifm1").load(
            function(){
                //因为iframe里面有document,所以获取下面的元素先用contains.
                var content=$('#ifm1').contents().find('body').text();
                var obj=JSON.parse(content);

                $("#preview").empty();//如果里面有标签先清空
                var imgTag=document.createElement("img");
                imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/"
                $("#preview").append(imgTag);

            }
            )
            //改变事件提交表单
            $("#form1").submit();
        }
    </script>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lixiang1013/p/7899934.html