Django 文件上传

三种文件上传方式：

a. Form表单上传，页面刷新


b. ajax方式(低版本浏览器不支持FormData())：

    $(function () {
        $('#btn1').click(function () {
            var fm = new FormData();
            fm.append('fffff', document.getElementById('ggggg').files[0]);
            fm.append('usernmae','root');
            
            $.ajax({
                url: "/ajax-upload/",
                type: 'POST',
                data: fm,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success:function (arg) {
                    console.log(arg);
                }
            })
        })
    })
View Code

 

c. "伪"Ajax操作（iframe + Form表单）

　　iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

1、iframe onload

　　onload事件会在页面或图像加载完成后立即发生

2、contents

　　contents() 函数的返回值为jQuery类型，返回一个新的jQuery对象，该对象包含了当前jQuery对象匹配元素的所有子节点(包括元素、文本、注释等所有类型的节点)。只要两个HTML标记之间存在任何空白字符(空格、换行符等)，就会被视作文本节点。如果元素是一个<iframe>，则选取该文档的所有文档节点。

 

<body>
    <h1>Form上传文件</h1>
    <form action="/upload/" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input  type="file" name="fffff"/>
        <input type="submit" value="提交" />
    </form>
    
    <h1>Ajax上传文件</h1>
    <input  type="file" id="ggggg"/>
    <a id="btn1">提交</a>
    
    <h1>"伪"Ajax操作</h1>
    <form id="ff1" action="/ajax-upload/" method="POST" enctype="multipart/form-data" target="ifr">
        {% csrf_token %}
        <input  type="file" name="fffff" onchange="changeImg();"/>
    </form>
    <iframe id="ifr" name="ifr" onload="successBack();"  style="display: none"></iframe>
    <div id="prevImg"></div>

    
    =========================================
    <script src="/static/jquery.js"></script>
    <script>
        $(function () {
            $('#btn1').click(function () {
                var fm = new FormData();
                fm.append('fffff', document.getElementById('ggggg').files[0]);
                $.ajax({
                    url: "/ajax-upload/",
                    type: 'POST',
                    data: fm,
                    processData: false,  // tell jQuery not to process the data
                    contentType: false,  // tell jQuery not to set contentType
                    success:function (arg) {
                        console.log(arg);
                    }
                })
            })
        });
        function successBack() {
            var v = $('#ifr').contents().find('body').html();
            var obj = JSON.parse(v);

            var tag = document.createElement('img');
            tag.src = "/" + obj.data;

            $('#prevImg').append(tag);

        }
        function changeImg() {
            document.getElementById('ff1').submit();
        }
    </script>
</body>
文件上传HTML代码

 

posted @ 2017-06-03 22:50  Vincen_shen  阅读(152)  评论(0)    收藏  举报